Question

我有一个页面，我一起初始化了Bootstrap-WYSIWYG和CKEditor。

问题是CKEditor不断向Bootstrap-WYSIWYG div添加自己，即使我使用class="ckeditor"

专门初始化了CKEditor

我的代码如下：

<textarea class="ckeditor" name="editor1"></textarea>

该页面位于http://cloudadmin-theme.elasticbeanstalk.com/rich_text_editors.html

尝试点击“带键盘快捷键的Bootstrap编辑器”的标签，其中写着“Go be ahead ...”。这会带来CKEditor onfocus，这很奇怪！

我的智慧结束了。有人可以指导我。我做错了什么？

Answer 1

CKEDITOR默认会自动挂钩具有contenteditable="true"属性的元素。您想要关闭CKEDITOR's auto inline editing，或者可以在全局配置中完成。

CKEDITOR.disableAutoInline = true;

我更喜欢在代码中而不是在配置中执行此操作，因此如果其他人使用它，则不要搞砸它们。

根据您对启用CKEDITOR This is pulled from the CKEDITOR 4 docs

的评论

启用内联编辑

通过HTML5直接在HTML元素上启用内联编辑   满足属性。

例如，假设您要使元素可编辑。   为了实现这一目标，这样就足够了：
<div id="editable" contenteditable="true">
    <h1>Inline Editing in Action!</h1>
    <p>The div element that contains this text is now editable.
</div>
也可以通过调用启用使用显式代码进行编辑 CKEDITOR.inline方法：
<div id="editable" contenteditable="true">
    <h1>Inline Editing in Action!</h1>
    <p>The div element that contains this text is now editable.
</div>
<script>
    // Turn off automatic editor creation first.
    CKEDITOR.disableAutoInline = true;
    CKEDITOR.inline( 'editable' );
</script>

Answer 2

您遇到的是ckeditor inline editor mode。

当你的html元素包含：

时会自动实例化

contenteditable="true"

要避免它，您可以删除此属性，也可以输入/Ckeditor/config.js文件

CKEDITOR.disableAutoInline = true;

要在standard mode中绑定ckeditor，您可以使用：

CKEDITOR.replace( 'editor1' );

如果您想在inline mode中绑定它：

CKEDITOR.inline( 'editor1' );

为什么CKEditor将自己添加到不应该的div？

2 个答案: