19

我正在创建一个 CKEditor 插件，使用版本 4.2.1。我正在尝试按照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

认为这可能是相关的，我还尝试使用 Chrome 的开发工具将文本元素的 z-index 设置为非常高。不走运，它仍然不可编辑/突出显示......

更新#2

这似乎是与 jQuery UI 的冲突。建议的修复对我来说还不起作用，但会四处寻找......留给任何可能偶然发现它的人。

最终更新

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

此外，作为参考， -1 的 tabindex 使事情变得untabbable，这对于背景来说是有意义的。

4

7 回答 7

29

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

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

于 2014-01-31T17:44:18.480 回答
7

使用 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 之后包含这个文件。

于 2017-06-16T11:45:27.273 回答
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

于 2015-01-22T10:27:53.797 回答
3

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

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

       // FIXING THE MODAL/CKEDITOR ISSUE
       $(".modal").removeAttr("tabindex");
});
</script>
于 2019-01-30T20:37:41.640 回答
1

我正在使用语义 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';
于 2019-12-17T03:41:08.523 回答
0

当我将 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或需要.cke将return语句中的类修改为.cke_dialog

 return !!$(event.target).closest(".cke").length || this._super(event);
于 2020-06-04T05:43:44.077 回答
-2

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

于 2014-02-06T17:46:20.130 回答