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

Question

我正在使用4.2.1版创建一个CKEditor插件.我试图按照简单插件上的教程.但是,对话框窗口中的文本输入在对话框中不可编辑/可点击,即使我只是从教程中复制整个abbr插件而没有任何更改.

我仍然可以单击对话框选项卡,确定/取消按钮,然后拖动对话框.我已经在我的自定义版本中添加了其他元素(如选择)到对话框,我可以与这些元素进行交互.

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

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

将文本添加到文本输入并在屏幕上显示.但我无法通过鼠标/键盘/浏览器与元素进行交互.我错过了CKEditor配置中有哪些明显的东西？对不起,如果这是一个非常愚蠢的问题 - 第一次使用CKEditor.我还搜索了CKEditor论坛和Google,没有发现任何相关问题.

这在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的冲突.建议的修复程序对我来说还不起作用,但是它会四处乱窜...让任何可能偶然发现它的人都会这样做.

---

最后更新

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

另外,作为参考,tabindex为-1使得事物无法实现,这对于背景来说是有意义的.

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 后包含此文件。