42

I am using tinyMCE4 editor inside a Boostrap modal dialog. when I clicked on link icon it opens a new modal dialog box, It displayed fine but the input areas are not editable.

<div id="editing" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <form>
    <label>
      <span>Description</span>
      <div id="description"></div>
    </label>
     <form>
 </div>

  <script>
    tinymce.init({
    selector: 'div#description',
    inline: false,
    theme : "modern",
    schema: "html5",
    add_unload_trigger: false,
    statusbar: false,
    plugins: "link",
    toolbar: "link | undo redo",
    menubar: false
 });
    </script>

enter image description here

Any suggestions

Thanks in advance

2
  • I'm having the same issue with a jQuery UI modal dialog. It appears to select the first input in the parent dialog rather than the source code textarea.
    – Harry
    Commented Aug 13, 2013 at 12:21
  • For Bootstrap 5, refer to this stackoverflow.com/a/66879496/15102874
    – lsx
    Commented May 30, 2021 at 5:34

14 Answers 14

83

From https://github.com/tinymce/tinymce/issues/782

For jQuery UI dialogs you can do this:

$.widget("ui.dialog", $.ui.dialog, {
    _allowInteraction: function(event) {
        return !!$(event.target).closest(".mce-container").length || this._super( event );
    }
});

This seems to be a more generalized solution that you might be able to modify for Bootstrap:

$(document).on('focusin', function(e) {
    if ($(e.target).closest(".mce-window").length) {
        e.stopImmediatePropagation();
    }
});

Update:

For the new version of ag-grid (20.2.0), if you are using the silver theme, mce-window was renamed to tox-dialog so you can just change the target class.

$(document).on('focusin', function(e) {
    if ($(e.target).closest(".tox-dialog").length) {
        e.stopImmediatePropagation();
    }
});
8
  • 3
    Thanks Harry and Neejoh it's working great :) Link jsfiddle.net/e99xf/13
    – prabu
    Commented Aug 19, 2013 at 12:34
  • I've tried Harry's solution and it doesn't seem to work. I'm using bootstrap 2.3.2 and tinymce 4.0.8. It seems to work on jsfiddle, but would that be outdated? Commented Oct 15, 2013 at 4:10
  • 1
    Speedynail6 - Please see prabu's jsfiddle link above your comment. It may have the code you need to get it working with Bootstrap.
    – Harry
    Commented Oct 15, 2013 at 12:48
  • 2
    There was a bug with Boostrap's dropdown menu once I added the second piece of jQuery. Replaced event with 'e' in event.target and it all worked fine. Commented Jan 23, 2014 at 11:07
  • 1
    Thanks. 2018 and it still helps. +1 Commented Aug 24, 2018 at 19:48
8

Ran into this issue as well. The code provided by prabu on his JS Fiddle almost worked perfectly.

I had to make a slight modification to it so that it would work for the MoxieManager fields when they are open as well.

$(document).on('focusin', function(e) {
    if ($(e.target).closest(".mce-window").length || $(e.target).closest(".moxman-window").length) {
        e.stopImmediatePropagation();
    }
});

This allows for editing images or renaming file paths in the MoxieManager when opened inside a Bootstrap Modal. Thanks for this.

6

The previous answer doesn't seem to work with Bootstrap v4 and TinyMCE v5. This is the modified solution should work:

  $(document).on('focusin', function(e) {
        if ($(e.target).closest(".tox-textfield").length)
            e.stopImmediatePropagation();
  });
1
  • THANKS! Been trying to solve this for hours. Fkin glitchy TinyMCE! This should be included by default. Commented Oct 30, 2019 at 22:05
3

2019 solution:

$(document).on('focusin', function(e) {
    if ($(e.target).closest(".mce-window").length) {
        e.stopImmediatePropagation();
    }
});
3

For all those who are using Material UI and looking for a solution : set disableEnforcedFocus = true in your Modal/Dialog... This is because by default material ui gets the focus and whaterver component you open on that it will not get the focus so you have to do it manually.

3

To render TinyMCE instances inside Bootstrap UI dialogs, add the following code:

Bootstrap 4 or below

// Prevent Bootstrap dialog from blocking focusin
$(document).on('focusin', function(e) {
  if ($(e.target).closest(".tox-tinymce, .tox-tinymce-aux, .moxman-window, .tam-assetmanager-root").length) {
     e.stopImmediatePropagation();
  }
});

Bootstrap 5 or above

 // Prevent Bootstrap dialog from blocking focusin
  document.addEventListener('focusin', (e) => {
   if (e.target.closest(".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root") !== null) {
      e.stopImmediatePropagation();
   }
  });
  
3
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review Commented Jan 19, 2022 at 0:23
  • Solution: Bootstrap 5 or above Worked for me
    – Jag
    Commented Aug 26, 2022 at 7:22
  • I sorted by the latest comment to find something that worked. This did it for me. Thanks @Basit
    – Workman
    Commented Sep 23, 2022 at 17:34
2

The example reported at: http://fiddle.jshell.net/e99xf/13/show/light/

Works perfectly for the older versions of bootstrap (2.3.2) and jQuery (1.8.3)

I'm trying the same with the most up-to-date versions and it does not work: Bootstrap 3.3.7 / jQuery 3.2.1

Below is what I'm using (remembering that the link you entered works perfectly in the old versions of the js).

ps. I'm using the w3schools.com editor

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"type=" text/javascript"></script>  
</head>
<body>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
tinymce.init({
    selector: "textarea",
    width:      '100%',
    height:     270,
    plugins:    [ "anchor link" ],
    statusbar:  false,
    menubar:    false,
    toolbar:    "link anchor | alignleft aligncenter alignright alignjustify",
    rel_list:   [ { title: 'Lightbox', value: 'lightbox' } ]
});

/**
 * this workaround makes magic happen
 * thanks @harry: http://stackoverflow.com/questions/18111582/tinymce-4-links-plugin-modal-in-not-editable
 */
$(document).on('focusin', function(e) {
    if ($(event.target).closest(".mce-window").length) {
    e.stopImmediatePropagation();
    }
});
});//]]> 

</script>

<div class="container">
  <h2>Modal Example</h2>


     <div class="col-sm-8">
       <div class="form-group">          
        <br>
        <label for="BL_DEF_MASCARA" class="control-label">Texto a ser exibido</label>
        <br>

        <div class="help-block with-errors"></div>
       </div>
     </div>  
<br>

  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Modal Header</h4>
    </div>
    <div class="modal-body">
      <textarea rows="4" cols="100" class="form-control" name="BL_DEF_MASCARA"></textarea>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
      </div>

    </div>
  </div>

</div>

</body>
</html>
1
  • 1
    you are passing the event object as e in your callback function, but referencing it as event in your if statement. Fix that and it should still work.
    – AverageJoe
    Commented Jun 21, 2018 at 16:42
2

my final workaround was to set the z-index of the appearing dialog higher than the z-index of the modal dialog. For example this would do the trick:

$(document).on('focusin', function(e) {
        if ($(e.target).closest(".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root, .tox-dialog").length) {
            $('.tox-dialog').css('z-index', '2003');
            e.stopImmediatePropagation();
        }
    });

pretty sure that you can set the css globally too

0

Try

event.stopImmediatePropagation();

instead of

e.stopImmediatePropagation();

Worked for me

2
  • 2
    e is just a variable, you can name it as you want Commented Mar 4, 2014 at 11:48
  • 2
    As counter-intuitive as this is, renaming the variable from "e" to "event" is the only thing that got this to work for me. Some other bit of magic must be happening. Commented Feb 12, 2015 at 17:08
0

In my case it was solved with the following code:

$(document).on('focusin', (e) => {
    if ($(e.target).closest('.mce-window').length) {
       $('.ModalHeader').attr('tabindex', '');
   }
});
0

None of the solutions on this page seem to work for Firefox.

In chrome if I do the code below, it leads to a focus event. If I change event to the e parameter, it does not work in chrome.

The event which solves it in chrome is called Focus Event. I have not managed to find this with Firefox.

Anyone got it working in Firefox ?

$(document).on('focusin', (e) => {
    if ($(event.target).closest('.mce-window').length) {
      event.stopImmediatePropagation(); 
   }
});
0

For bootstrap 5 and Tinymce v4.7.9

Try

 document.addEventListener('focusin', function(e) {
    if (e.target.closest(".mce-window") !== null) {
    e.stopImmediatePropagation();
    }
  });

It works for me

0

for bootstrap 5 with versions of tinymce 5 o above, you must use this,

// Prevent Bootstrap dialog from blocking focusin
   document.addEventListener('focusin', (e) => {
    if (e.target.closest(".tox-tinymce-aux, .moxman-window, .tam-assetmanager- 
        root") !== null) {
   e.stopImmediatePropagation();
   }
 });

by [1]: https://www.tiny.cloud/docs/integrations/bootstrap/#usingtinymceinabootstrapdialog

0

tinymce not clickble input issue in bootstrap modal here is how i solved it.....
I am trying to solve it wasted many hours finally found this

First I initialise tinymce add link plugin

tinymce.init({
  selector: 'textarea#addContent',
  plugins: 'autoresize',
  plugins: "link autolink", 
  placeholder: "Write content for blog...",
  height: 300
});

Then to solve the clickble issue in Bootstrap modal

document.addEventListener('focusin', (e) => {
  if (e.target.closest(".tox-tinymce, .tox-tinymce-aux, .moxman-window, .tam-assetmanager-root") !== null) {
    e.stopImmediatePropagation();
  }
});

By adding this we can use tinymce in Bootstrap modal i solved the not clickble issue for link/anchor tag hope this help

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.