javascript - 生成代码上带有工具栏的内联 CKEditor

Question

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

该位正在工作，但为了编辑文本，我正在尝试使用 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 或之前已从 DOM 中删除的元素的数量 inline()叫做。

确保顺序正确:

<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()在元素注入(inject) DOM 后调用。

“最后的希望”建议:你打电话inline()来自不同的 DOM 范围(即 iframe 窗口)？