Question

我正在建立一个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？

提前致谢

Answer 1

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

确保订单正确无误：

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

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

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

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

Answer 2

感谢回答oleq。

是的，问题是在加载ckeditor后插入了内容。我也遇到了谷歌浏览器灰色工具栏的问题。

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

$('.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);
});

内联CKEditor，生成代码上有工具栏

2 个答案: