Tinymce的源码textarea不可编辑

Question

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

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

此时，我什至不知道该往哪里挖。我唯一能看到的是源代码文本区域附加了一个事件（不确定是否应该）。

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

Answer 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 链接插件模式不可编辑

Answer 2

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

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

Answer 3

对我来说有用

$(document).on('focusin', function (e) {

if ($(e.target).closest(".mce-window, .moxman-window, .tox-tinymce-aux, .tam-assetmanager-root").length) {

    e.stopImmediatePropagation();
}

});