Question

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

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

当我检查Chrome的开发工具中的文本输入元素时，我可以通过Console / 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

这似乎是jQuery UI的this conflict。建议的修复程序对我来说还不起作用，但是它会四处乱窜...为可能偶然发现它的人留下这个。

最终更新

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

另外，作为参考，tabindex为-1会产生untabbable，这对于背景来说是有意义的。

Answer 1

模态html属性tabindex='-1'似乎正在为我造成问题。

tabindex='-1'实际上是在bootstrap文档中，并且由于某些我不知道的原因而需要。

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

OMG我一直在谷歌上搜索数小时，最后喜欢一些有效的代码!!

将此粘贴在您的对话框页面中，其中包含一个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并通过在创建Modal之后创建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属性并进行更改。希望这会帮助你。

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

更新＃1

更新＃2

最终更新

7 个答案: