在生成的代码上带有工具栏的内联 CKEditor答案

【问题标题】：Inline CKEditor with toolbar on generated code在生成的代码上带有工具栏的内联 CKEditor
【发布时间】：2013-07-03 03:12:56
【问题描述】：

我目前正在为 cms 构建后端。我被要求创建一个模块来生成不同的块以快速制作页面（下面有文字的图片，右边有文字的图片等）

那位正在工作，但为了编辑我正在尝试使用 ckeditor 的文本。使用以下代码，文本是可编辑的，但我没有得到工具栏：

<div id="editable" contenteditable="true">
    <h4>{{title}}</h4>
    {{text}}
</div>

为了尝试解决这个问题，我尝试使用 CKEditor 指南中的 javascript：

CKEDITOR.disableAutoInline = true;
CKEDITOR.inline( 'editable' );

这段代码只是在创建一个错误：

Uncaught TypeError: Cannot call method 'getEditor' of undefined

我想这是因为在生成文本之前，编辑器没有可链接的内容。

谁能帮我用工具栏使生成的代码可编辑？另外，是否可以让 ckeditor 使用类名而不是 ID？

提前致谢

【问题讨论】：

标签： javascript jquery ckeditor

【解决方案1】：

在initialization phase CKEditor 检查是否有编辑器实例already bound to the element。您收到的错误表明您正在提供尚未附加到 DOM 的元素的 id，或者在调用 inline() 之前它已从 DOM 中删除。

确保顺序正确：

<div id="editable" contenteditable="true">
    <h4>{{title}}</h4>
    {{text}}
</div>

<script>
   CKEDITOR.disableAutoInline = true;
   CKEDITOR.inline( 'editable' );
</script>

<div id="editable" contenteditable="true">...</div> 是由 JavaScript 生成的吗？如果是这样，请确保在将元素注入 DOM 之后调用 inline()。

“最后的希望”建议：您是否从不同的 DOM 范围（即 iframe 窗口）调用 inline()？

【讨论】：

【解决方案2】：

感谢 oleq 的回答。

是的，问题是在加载 ckeditor 后插入内容。我也遇到了 Google Chrome 工具栏变灰的问题。

为了解决这两个问题，我在插入新内容后使用了以下代码：

$('.editable').click(function() {
    var name;
    for(name in CKEDITOR.instances) {
        var instance = CKEDITOR.instances[name];
        if(this && this == instance.element.$) {
            return;
        }
    }
    $(this).attr('contenteditable', true);
    CKEDITOR.inline(this);
});

【讨论】：