CKEditor插件:文本字段不可编辑 [英] CKEditor Plugin: text fields not editable

问题描述

我正在使用4.2.1版创建CKEditor插件.我正在尝试遵循简单插件上的教程.但是，对话框对话框中的文本输入在对话框中不可编辑/不可单击，即使我只是直接复制了本教程中的整个abbr插件，也没有进行任何更改.

I am creating a CKEditor plugin, using version 4.2.1. I am trying to follow the tutorial on a Simple Plugin. However, the text inputs in my dialog window are not editable / clickable in the dialog, even when I just copy in the entire abbr plugin from the tutorial with no changes.

我仍然可以单击对话框选项卡，确定"/取消"按钮，然后拖动对话框.我在自定义版本的对话框中添加了其他元素(例如selects)，并且可以与之交互.

I can still click the dialog tabs, OK / Cancel buttons, and drag the dialog around. I have added in other elements (like selects) to the dialog in my custom version, and I can interact with those.

当我在Chrome的开发工具中检查文本输入元素时，可以通过Console/jQuery添加文本，它会出现.我在控制台上没有任何失败.

When I check the text input elements in Chrome's Dev Tools, I can add text via the Console / jQuery and it appears. I get no failures in the Console.

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

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

Will add text to the text input and display it on the screen. But I can't interact with the element via mouse / keyboard / browser. Is there something obvious in the CKEditor configuration that I am missing? Sorry if this is a really stupid question--first time working with CKEditor. I have also searched the CKEditor forums and Google, without finding any related issues.

Chrome 30和FF 24都会发生这种情况.

This happens in both Chrome 30 and FF 24.

创建编辑器的电话:

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

感谢任何提示或提示！

考虑这可能是相关的，我还尝试使用Chrome的开发工具将text元素的z-index设置得很高.真不走运，它仍然无法编辑/突出显示...

Thinking this might be related, I have also tried setting the z-index of the text element to very high, using Chrome's Dev Tools. No luck, it is still not editable / highlightable...

与jQuery UI的冲突似乎是此冲突.建议的修复程序对我而言尚不可用，但会四处探索...将其留给可能偶然发现此问题的任何人使用.

This seems to be this conflict with jQuery UI. The suggested fix doesn't work for me yet, but will poke around...leaving this up for anyone who might stumble across it.

所以Brian的秘诀帮助了我. Bootbox模态背景(我用来生成原始对话框的模态背景)和CKEditor对话框背景都具有tabindex = -1，因此它们以某种方式发生冲突.手动关闭Bootbox背景幕(即设置tabindex ='')可与Chrome开发者工具一起使用，因此我认为我可以与jQuery或其他工具一起使用.很棒的东西...感谢您的帮助！！不知道为什么我要在jsFiddle中使用它...如果我没记错的话，这些对话框可能没有背景.

So Brian's tip helped me. Both the Bootbox modal backdrop (what I am using to generate the original dialog) and the CKEditor dialog backdrop have tabindex=-1, so they conflict somehow. Manually turning off the Bootbox backdrop (i.e. setting tabindex='') works with Chrome dev tools, so I think I can hack something together with jQuery or whatnot. Amazing stuff...thanks for the help!! Not sure why I got this working in a jsFiddle...if I recall correctly, I might not have had a backdrop on those dialogs.

此外，作为参考，tabindex -1使无法粘贴，这对于背景来说是有意义的.

Also, for reference, a tabindex of -1 makes things untabbable, which makes sense for a backdrop.

推荐答案

模态html属性tabindex='-1'似乎是引起我问题的原因.

The modal html attribute tabindex='-1' is what seems to be causing the issues for me.

tabindex='-1'实际上位于引导文档中，出于某些我不知道的原因而需要使用.

The tabindex='-1' is actually in the bootstrap documentation and is needed for some reason that I am unaware of.

这篇关于CKEditor插件:文本字段不可编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！