【问题标题】：TinyMCE 4 links plugin modal in not editableTinyMCE 4 链接插件模式不可编辑
【发布时间】：2013-08-07 18:56:56
【问题描述】：

我在 Boostrap 模式对话框中使用 tinyMCE4 编辑器。当我点击链接图标时，它会打开一个新的模式对话框，它显示正常，但输入区域不可编辑。

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

任何建议

提前致谢

【问题讨论】：

我在使用 jQuery UI 模式对话框时遇到了同样的问题。它似乎选择了父对话框中的第一个输入而不是源代码文本区域。
对于 Bootstrap 5，参考这个stackoverflow.com/a/66879496/15102874

标签： jquery twitter-bootstrap ruby-on-rails-3.2 tinymce-4 tinymce-rails

【解决方案1】：

来自https://github.com/tinymce/tinymce/issues/782

对于 jQuery UI 对话框，您可以这样做：

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

这似乎是一个更通用的解决方案，您可以针对 Bootstrap 进行修改：

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

更新：

对于新版本的 ag-grid (20.2.0)，如果您使用的是银色主题，mce-window 已重命名为 tox-dialog，因此您只需更改目标类即可。

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

【讨论】：

感谢 Harry 和 Neejoh，它工作得很好 :) 链接 jsfiddle.net/e99xf/13
我已经尝试过 Harry 的解决方案，但它似乎不起作用。我正在使用引导程序 2.3.2 和 tinymce 4.0.8。它似乎适用于 jsfiddle，但这会过时吗？
Speedynail6 - 请在评论上方查看 prabu 的 jsfiddle 链接。它可能有你需要的代码让它与 Bootstrap 一起工作。
在我添加第二个 jQuery 后，Boostrap 的下拉菜单出现了一个错误。在 event.target 中将事件替换为“e”，一切正常。
谢谢。 2018，它仍然有帮助。 +1

【解决方案2】：

也遇到了这个问题。 prabu 在他的 JS Fiddle 上提供的代码几乎可以完美运行。

我必须对其进行轻微修改，以便在 MoxieManager 字段打开时也能正常工作。

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

当在 Bootstrap Modal 中打开时，这允许在 MoxieManager 中编辑图像或重命名文件路径。谢谢你。

【讨论】：

【解决方案3】：

之前的答案似乎不适用于 Bootstrap v4 和 TinyMCE v5。这是修改后的解决方案应该可以工作：

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

【讨论】：

谢谢！几个小时以来一直试图解决这个问题。 Fkin 故障 TinyMCE！默认情况下应该包含它。

【解决方案4】：

2019年解决方案：

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

【讨论】：

【解决方案5】：

对于所有使用 Material UI 并寻找解决方案的人：在模态/对话框中设置 disableEnforcedFocus = true ... 这是因为默认情况下，材质 ui 会获得焦点，而您打开的任何组件都不会获得焦点，因此您必须手动完成。

【讨论】：

【解决方案6】：

示例报告于：http://fiddle.jshell.net/e99xf/13/show/light/

非常适合旧版本的 bootstrap (2.3.2) 和 jQuery (1.8.3)

我正在尝试使用最新版本，但它不起作用：引导程序 3.3.7 / jQuery 3.2.1

以下是我正在使用的（记住您输入的链接在旧版本的 js 中完美运行）。

ps。我正在使用 w3schools.com 编辑器

<!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>

【讨论】：

您在回调函数中将事件对象作为 e 传递，但在 if 语句中将其引用为 event。修复它，它应该仍然可以工作。

【解决方案7】：

我的最终解决方法是将出现对话框的 z-index 设置为高于模态对话框的 z-index。例如，这可以解决问题：

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

很确定你也可以全局设置 css

【讨论】：

【解决方案8】：

试试

event.stopImmediatePropagation();

而不是

e.stopImmediatePropagation();

为我工作

【讨论】：

e只是一个变量，你可以随意命名
尽管这违反直觉，但将变量从“e”重命名为“event”是唯一能让它为我工作的方法。一定会发生其他一些神奇的事情。

【解决方案9】：

在我的情况下，它是通过以下代码解决的：

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

【讨论】：

【解决方案10】：

此页面上的解决方案似乎都不适用于 Firefox。

在 chrome 中，如果我执行下面的代码，它会导致焦点事件。如果我将 event 更改为 e 参数，它在 chrome 中不起作用。

在 chrome 中解决它的事件称为焦点事件。我没有设法用 Firefox 找到这个。

有人让它在 Firefox 中工作吗？

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

【讨论】：

【解决方案11】：

要在 Bootstrap UI 对话框中呈现 TinyMCE 实例，请添加以下代码：

Bootstrap 4 或以下

// 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 或更高版本

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

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review

【解决方案12】：

对于 bootstrap 5 和 Tinymce v4.7.9

试试

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

对我有用

【讨论】：