TinyMCE 4 links plugin modal in not editable

Question

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>

Any suggestions

Thanks in advance

Fachanan

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. – Statesmanship

For Bootstrap 5, refer to this https://mcmap.net/q/391372/-tinymce-doesn-39-t-work-within-bootstrap-5-modal – Sathrum

Answer 1

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();
    }
});

Statesmanship

Thanks Harry and Neejoh it's working great :) Link jsfiddle.net/e99xf/13 – Fachanan

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? – Hildy

Speedynail6 - Please see prabu's jsfiddle link above your comment. It may have the code you need to get it working with Bootstrap. – Statesmanship

Hi harry. I tried your code that you put on jsfiddle. it doesn't work. – Hildy

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. – Quattrocento

The link to the issue is broken. This appears to be the current one: github.com/tinymce/tinymce/issues/782 – Tandratandy

I've updated the link to the ticket/issue. Thank you – Statesmanship

Thanks. 2018 and it still helps. +1 – Louisalouisburg

Answer 2

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.

Triumvir

Answer 3

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();
  });

Donyadoodad

THANKS! Been trying to solve this for hours. Fkin glitchy TinyMCE! This should be included by default. – Hertzfeld

Answer 4

2019 solution:

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

Midnight

Answer 5

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.

Rellia

Answer 6

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();
   }
  });
  

Jacobsohn

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 – Heinrike

Solution: Bootstrap 5 or above Worked for me – Denby

I sorted by the latest comment to find something that worked. This did it for me. Thanks @Jacobsohn – Ensiform

Answer 7

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: https://mcmap.net/q/382365/-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>

Kendakendal

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. – Triumvir

Answer 8

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

Graze

Answer 9

Try

event.stopImmediatePropagation();

instead of

e.stopImmediatePropagation();

Worked for me

Morissa

e is just a variable, you can name it as you want – Chumash

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. – Aureliaaurelian

Answer 10

In my case it was solved with the following code:

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

Honghonied

Answer 11

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(); 
   }
});

Denver

Answer 12

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

Nepil

Answer 13

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

Religieuse

Answer 14

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

Rip