2

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

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

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

为了尝试解决这个问题，我尝试使用 CKEditor's guide 中的 javascript：

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

此代码只是创建一个错误：

Uncaught TypeError: Cannot call method 'getEditor' of undefined

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

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

提前致谢

4

2 回答 2

4

在初始化阶段CKEditor 检查是否有一个编辑器实例已经绑定到 element。您收到的错误表明您提供id的元素尚未附加到 DOM 或在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 生成的吗？如果是这样，请确保inline()在元素注入 DOM 之后调用它。

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

于 2013-07-01T20:03:39.637 回答
3

感谢您的回答 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);
});
于 2013-07-02T19:12:56.323 回答