Tinymce 的源代码 textarea 不可编辑答案

【问题标题】：Tinymce's source code textarea is not editableTinymce 的源代码 textarea 不可编辑
【发布时间】：2015-05-14 08:41:55
【问题描述】：

我正在为我的一个项目使用 ui-tinymce (https://github.com/angular-ui/ui-tinymce)。通过演示工作（该指令没有太多文档）。总的来说，除了源代码编辑器之外，一切都运行良好。

在我的情况下，所见即所得是在模态中打开的（也有角度：http://angular-ui.github.io/bootstrap/#/modal）。 timyMCE中源码的实现开启了另一个模态。通常这不是问题，但是在我的情况下，源代码的文本区域不可编辑。如果我强制关闭第一个模式，源代码变得可修改。

在这一点上，我什至不知道在哪里挖掘。我唯一能看到的是源代码 textarea 附加了一个事件（不确定是否应该）。

我将不胜感激任何方向的帮助。

【问题讨论】：

对于 Bootstrap 5 Modal，参考这个stackoverflow.com/a/66879496/15102874

标签： angularjs angular-ui angular-ui-bootstrap wysiwyg

【解决方案1】：

我在 jQuery UI 对话框中遇到了同样的问题。

官方网页现在有集成文档：

https://www.tiny.cloud/docs/integrations/bootstrap/

// Prevent Bootstrap dialog from blocking focusin
$(document).on('focusin', function(e) {
  if ($(e.target).closest(".mce-window").length) {
    e.stopImmediatePropagation();
  }
});

https://www.tiny.cloud/docs/integrations/jquery/

// Prevent jQuery UI dialog from blocking focusin
$(document).on('focusin', function(e) {
    if ($(e.target).closest(".mce-window, .moxman-window").length) {
        e.stopImmediatePropagation();
    }
});

我发现上面的代码只有在我们打开对话框之前运行它才有效 - 如果我尝试在初始化 TinyMCE 之前但在打开对话框之后运行它，它就不起作用。

这也在这里得到了回答： TinyMCE 4 links plugin modal in not editable

【讨论】：

【解决方案2】：

我在 jsf (primefaces) 中使用了 tinymce，在 ui-dialog 中使用时遇到了同样的问题。搜索后发现大多数答案都与focusin事件有关。但那些对我不起作用。最后是关于 z 索引。下面的css解决了这个问题：

.tox-dialog {
    z-index: 150000 !important;
}

【讨论】：