CKEditor 插件：文本字段不可编辑

Question

我正在创建一个 CKEditor 插件，使用版本 4.2.1。我正在尝试关注tutorial on a Simple Plugin。但是，我的对话框窗口中的文本输入在对话框中不可编辑/可单击，即使我只是从教程中复制了整个 abbr 插件而没有任何更改。

我仍然可以单击对话框选项卡、确定/取消按钮并拖动对话框。我在自定义版本的对话框中添加了其他元素（如选择），我可以与这些元素进行交互。

当我在 Chrome 的开发工具中检查文本输入元素时，我可以通过控制台/jQuery 添加文本并显示它。我在控制台中没有失败。

$('#cke_229_textInput').val('help');

将文本添加到文本输入并显示在屏幕上。但我无法通过鼠标/键盘/浏览器与元素交互。 CKEditor 配置中是否有我遗漏的明显内容？对不起，如果这是一个非常愚蠢的问题——第一次使用 CKEditor。我也搜索了CKEditor论坛和谷歌，没有发现任何相关问题。

这发生在 Chrome 30 和 FF 24 中。

我呼吁创建编辑器：

var me = document.getElementById('resource_editor_raw');
editor = CKEDITOR.replace(me, {
    fullPage: true,
    removePlugins: 'newpage,forms,templates',
    extraPlugins: 'abbr',
    allowedContent: true
});

感谢任何提示或提示！

---

更新 #1

思考this might be related，我也尝试使用 Chrome 的开发工具将文本元素的 z-index 设置为非常高。不走运，它仍然不可编辑/高亮...

---

更新 #2

这似乎是带有 jQ​​uery UI 的 this conflict。建议的修复对我还不起作用，但会四处寻找......留给任何可能偶然发现它的人。

---

最终更新

所以布赖恩的小费帮助了我。 Bootbox 模态背景（我用来生成原始对话框）和 CKEditor 对话框背景都有 tabindex=-1，所以它们会以某种方式发生冲突。手动关闭 Bootbox 背景（即设置 tabindex=''）适用于 Chrome 开发工具，所以我想我可以用 jQuery 或其他东西一起破解一些东西。惊人的东西......感谢您的帮助！不知道为什么我让这个在 jsFiddle 中工作......如果我没记错的话，我可能没有这些对话框的背景。

另外，作为参考，-1 的 tabindex 使事物 untabbable，这对于背景是有意义的。

Answer 1

模态 html 属性 tabindex='-1' 似乎是导致我遇到问题的原因。

tabindex='-1' 实际上在引导文档中，出于某种我不知道的原因需要它。

Answer 2

使用 100% 工作脚本..

<script type="text/javascript">
    // Include this file AFTER both jQuery and bootstrap are loaded.
    $.fn.modal.Constructor.prototype.enforceFocus = function() {
      modal_this = this
      $(document).on('focusin.modal', function (e) {
        if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length 
        && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_select') 
        && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_textarea')
        && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) {
          modal_this.$element.focus()
        }
      })
    };
</script>

注意：在加载 jQuery 和 bootstrap 后包含此文件。

Answer 3

我的天啊，我已经在谷歌上搜索了好几个小时，终于找到了一些有效的代码！

将其粘贴在您的对话页面中，其中将包含一个 ckeditor：

orig_allowInteraction = $.ui.dialog.prototype._allowInteraction;
$.ui.dialog.prototype._allowInteraction = function(event) {
   if ($(event.target).closest('.cke_dialog').length) {
      return true;
   }
   return orig_allowInteraction.apply(this, arguments);
};

我在这里找到了解决方法： https://forum.jquery.com/topic/can-t-edit-fields-of-ckeditor-in-jquery-ui-modal-dialog

Answer 4

不确定现在是否还有其他人遇到此问题。我正在扯掉我的头发试图创造一个黑客。经过一段时间的挖掘和搜索，这是一个非常简单的解决方案。这个修复帮助了我。只需将它放在您想要放置编辑器的同一页面上 - 从 jQuery 加载时。问题是 tabindex 冲突，所以我只是从模式中删除了该属性。

<script>
$(function(){ 
       // APPLY THE EDITOR TO THE TEXTAREA
       $(".wysiwyg").ckeditor();

       // FIXING THE MODAL/CKEDITOR ISSUE
       $(".modal").removeAttr("tabindex");
});
</script>

Answer 5

我正在使用语义 UI 并通过在创建模态后创建 CKEDITOR 的实例来解决此问题。

    $('#modal-send').modal('attach events', '.btn-close-modal').modal('show');
    var ckeOptions = {
        entities: false,
        htmlEncodeOutput: false,
        htmlDecodeOutput: true
    }

    CKEDITOR.replace('message', ckeOptions);
    CKEDITOR.config.extraPlugins = 'justify';

Answer 6

当我将 CKEditor 更新到 4.14 时，我也遇到了这个问题 我在这里找到了修复 - http://jsfiddle.net/kamelkev/HU8Qt/3/ 在这种情况下，

$.widget("ui.dialog", $.ui.dialog, {
        _allowInteraction: function (event) {
            return !!$(event.target).closest(".cke").length || this._super(event);
        }
    });

它将返回 false，因此文本框被禁用/不聚焦（失去焦点） 作为解决方案，我们需要返回true或者需要将return语句中的.cke类修改为.cke_dialog

 return !!$(event.target).closest(".cke").length || this._super(event);

Answer 7

我尝试从 CK 编辑器 [没有 CKFinder] 将图像上传到服务器，从积极的方面来说，我能够做到。每当我们尝试创建一些对话框时，他们都会即时创建一个div 来保存您的对话框。最好使用 chrome 检查文本框的 CSS 属性并进行更改。希望这会帮助你。