CKEDITOR没有工具栏闪烁图标的内联编辑器

CKEDITOR inline editor without toolbar blinking icons

本文关键字：编辑器 图标 闪烁 工具栏 CKEDITOR      更新时间：2023-09-26

我的网页中有CKEDITOR，允许用户为自定义可编辑内容编辑HTML段落、页眉等。我查了一下，删除了内联编辑器的默认工具栏，只要我在一个浮动对话框中创建自己的"工具栏"。

使用我发布的链接中的答案，当我尝试编辑任何双击的元素时（因为我将dblclick事件附加到所有为该元素创建CKEDITOR实例的元素上），效果非常好，但2-3秒后，对话框中粗体文本、更改对齐方式等的图标会闪烁（消失并重新出现），就像你在文档中重新加载了什么一样。

有人知道为什么吗？看到某些东西被重新加载是非常令人沮丧的，但事实并非如此（显然）。

提前谢谢。

编辑

抱歉，我以前无法发布我的代码，因为我正在工作。这是我所拥有的：

CKEDITOR.disableAutoInline = true;
if (!CKEDITOR.instances.editorId) {
    CKEDITOR.inline('editorId', {
        plugins: 'toolbar,basicstyles,wysiwygarea,indent,link,list,find',
        autoParagraph: true,
        allowedContent: true,
        forcePasteAsPlainText: true,
        disableNativeSpellChecker: false,
        resize_enabled: false,
        stylesSet: 'default:styles.js',
        contentsCss: ['http://www.youblue.es/css/fonts.css'],
        title: false,
        removePlugins: 'toolbar'
    }); // I loaded all config here, taking advantage that I had to remove toolbar
}

以下是我迄今为止所做的尝试，但没有得到预期的结果：

CKEDITOR.appendTo('editorId', {
    plugins: 'toolbar,basicstyles,wysiwygarea,indent,link,list,find',
    autoParagraph: true,
    allowedContent: true,
    forcePasteAsPlainText: true,
    disableNativeSpellChecker: false,
    resize_enabled: false,
    stylesSet: 'default:styles.js',
    contentsCss: ['http://www.youblue.es/css/fonts.css'],
    title: false,
    removePlugins: 'toolbar'
}, '');
////////////////////////////////////////////////////
CKEDITOR.inline('editorId', {
    plugins: 'toolbar,basicstyles,wysiwygarea,indent,link,list,find',
    autoParagraph: true,
    allowedContent: true,
    forcePasteAsPlainText: true,
    disableNativeSpellChecker: false,
    resize_enabled: false,
    stylesSet: 'default:styles.js',
    contentsCss: ['http://www.youblue.es/css/fonts.css'],
    title: false,
    removePlugins: 'toolbar'
});
////////////////////////////////////////////////////
CKEDITOR.replace('editorId', {
    plugins: 'toolbar,basicstyles,wysiwygarea,indent,link,list,find',
    autoParagraph: true,
    allowedContent: true,
    forcePasteAsPlainText: true,
    disableNativeSpellChecker: false,
    resize_enabled: false,
    stylesSet: 'default:styles.js',
    contentsCss: ['http://www.youblue.es/css/fonts.css'],
    title: false,
    removePlugins: 'toolbar'
});

最准确的是inline函数调用，但正如我所提到的，当编辑器加载时，图标会闪烁。

希望这能有所帮助。

希望我找到了解决方案。当我试图删除工具栏插件时，我的CKEditor构建似乎出了问题，但当我从config:中的这行删除'toolbar'时，它就起了作用

CKEDITOR.inline('editorId', {
    // ...
    plugins: 'toolbar,basicstyles,wysiwygarea,indent,link,list,find', // <- This one
    // ...
}

当我删除这行时，图标停止闪烁：

removePlugins: 'toolbar'

当您使用removePlugins时，它似乎会重新加载编辑器，但仅当删除toolbar插件时。它没有在没有手动删除插件的情况下删除工具栏，可能是因为加载时出现了问题/与CKEditor冲突。为了避免这种情况，只需确保所有JS都以正确的顺序加载，检查JS路径是否正确，并检查是否有任何JS覆盖其他JS。

当我在这里发帖后找到解决方案时，我感到非常愚蠢和新手。我感到羞愧

对不起，伙计们。

相关文章：