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>

enter image description here

Any suggestions

Thanks in advance

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, Aug 13 '13 at 12:21
For Bootstrap 5, refer to this https://stackoverflow.com/a/66879496/15102874 — lsx, May 30 '21 at 05:34

score 82 · Accepted Answer · edited Apr 17 '19 at 17:30

82

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

edited Apr 17 '19 at 17:30

Diego Marino

3
4

answered Aug 13 '13 at 12:50

Harry

3,116
2
23
20

3

Thanks Harry and Neejoh it's working great :) Link http://jsfiddle.net/e99xf/13/ – prabu Aug 19 '13 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? – Speedysnail6 Oct 15 '13 at 04: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 Oct 15 '13 at 12:48
Hi harry. I tried your code that you put on jsfiddle. it doesn't work. – Speedysnail6 Oct 16 '13 at 23:54
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. – Joseph Christopher Jan 23 '14 at 11:07
The link to the issue is broken. This appears to be the current one: https://github.com/tinymce/tinymce/issues/782 – Zero3 Aug 22 '16 at 12:45
I've updated the link to the ticket/issue. Thank you – Harry Aug 22 '16 at 21:41
1

Thanks. 2018 and it still helps. +1 – David Dutra Aug 24 '18 at 19:48

score 8 · Answer 2 · answered Sep 12 '14 at 21:08

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.

score 6 · Answer 3 · answered Apr 11 '19 at 10:58

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

answered Apr 11 '19 at 10:58

Roy2718

111
3
11

THANKS! Been trying to solve this for hours. Fkin glitchy TinyMCE! This should be included by default. – Paul Denisevich Oct 30 '19 at 22:05

score 3 · Answer 4 · edited Jun 20 '20 at 09:12

3

2019 solution:

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 13 '19 at 10:13

charlie

490
1
9
23

score 3 · Answer 5 · answered Apr 29 '20 at 11:05

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.

Basit · Answer 6 · 2022-01-25T10:29:03.417

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

edited Jan 25 '22 at 10:29

answered Jan 14 '22 at 05:17

Basit

137
7

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](/review/late-answers/30815240) – kirjosieppo Jan 19 '22 at 00:23
Solution: Bootstrap 5 or above Worked for me – Jag Aug 26 '22 at 07:22
I sorted by the latest comment to find something that worked. This did it for me. Thanks @Basit – Workman Sep 23 '22 at 17:34

score 2 · Answer 7 · edited Nov 26 '17 at 20:25

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>

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, Jun 21 '18 at 16:42

score 2 · Answer 8 · edited Jan 08 '20 at 13:40

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

score 0 · Answer 9 · answered Jan 16 '14 at 15:19

0

Try

event.stopImmediatePropagation();

instead of

e.stopImmediatePropagation();

Worked for me

answered Jan 16 '14 at 15:19

user3203126

17
1

2

e is just a variable, you can name it as you want – Andzej Maciusovic Mar 04 '14 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. – Brendan Kendrick Feb 12 '15 at 17:08

score 0 · Answer 10 · answered Aug 07 '17 at 10:21

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', '');
   }
});

answered Aug 07 '17 at 10:21

Flavio H. Freitas

267
7
14

score 0 · Answer 11 · edited Feb 06 '19 at 19:51

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

score 0 · Answer 12 · answered Mar 04 '22 at 06:58

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

answered Mar 04 '22 at 06:58

jyoti singh

1

score 0 · Answer 13 · answered Dec 26 '22 at 22:23

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

TinyMCE 4 links plugin modal in not editable

13 Answers13

2019 solution:

Linked