Question

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

在我的情况下，WYSIWYG在一个模态中打开（也是角度：http://angular-ui.github.io/bootstrap/#/modal）。 timyMCE中源代码的实现正在打开另一个模态。通常这不是问题，但在我的情况下，源代码的textarea是不可编辑的。如果我强行关闭第一个模态，源代码就变得可以用了。

此时，我甚至不确定在哪里挖掘。我唯一能看到的是源代码textarea附加了一个事件（不确定它是否应该）。

我会感谢任何方向的任何帮助。

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 links plugin modal in not editable

Answer 2

我在jsf（primefaces）内部使用了tinymce，在ui对话框中使用时遇到了同样的问题。搜索后发现，大多数答案与focusin事件有关。但是这些对我没有用。最后，它与z索引有关。在css下面解决了问题：

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

Tinymce的源代码textarea不可编辑

2 个答案: