Tinymce 代码编辑器在 JTable Grid 中是只读的

Question

我有 JQuery jTable 网格，每行包含编辑按钮。

FormEditor 以模式打开，tinymce 正确显示并正常工作，除了当我打开源代码编辑器时我发现文本区域处于只读模式，我需要将其设为可编辑。

我尝试了几个版本的 tinymce。

导致源代码编辑器中的文本区域为只读的主要原因是什么，以及如何解决这个问题。？

Answer 1

我是 guessing/assuming 你正在使用 Bootstrap 作为你的模式（如果你澄清你正在使用什么来创建你的模式，它会帮助其他人）。

Bootstrap 模式有代码阻止其他任何东西在启用时获得焦点（按设计）。当 TinyMCE 的代码视图出现时，它想要获得焦点，但 Bootstrap 阻止了这种情况的发生。您应该能够使用如下代码覆盖它：

$('#myModal').on('shown.bs.modal', function() {
    $(document).off('focusin.modal');
});

（假设 Bootstrap 3 并且您不介意使用 jQuery 这是此问题的标签之一）

Answer 2

jTable 使用 jqueryUI 模态对话框，这就是问题的原因。

我在这里找到了最接近我的问题的答案： TinyMCE opened in jqueryUI modal dialog

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

EDIT: This is another solution for jQuery UI >= 1.10.2:

Replacing _focusTabbable prototype method by a placebo function fixed it:

$.ui.dialog.prototype._focusTabbable = $.noop;

在此处找到此解决方案：prevent jquery ui dialog from setting focus to first textbox

Tinymce code editor is readonly in JTable Grid