TinyMCE 4链接插件模态不可编辑

问题描述

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

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>

任何建议

预先感谢

推荐答案

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

对于jQuery UI对话框，您可以执行以下操作:

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

这似乎是一种更通用的解决方案，您可以为Bootstrap进行修改:

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

更新:

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

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

这篇关于TinyMCE 4链接插件模态不可编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！