Question

我在DIV模式下使用CKEditor，与IFRAME相比，我试图将一个类分配给编辑器本身。我已经找到了将它添加到编辑器中的内容的位置，而不是编辑器本身。并且，我宁愿不将编辑器包装在另一个DIV中以获得我想要的效果。

我也在使用CKEditor的第4版。

编辑：以下是他在提出共享空间插件后向Reinmar提出的问题，至少现在我选择不使用它。

编辑：为响应Reinmar，我已经开始使用Shared Space插件，并确实看到了在DIV上使用它的潜在好处。

据说我有以下代码：

<div id="topSpace"></div>
<textarea name="data[ArchiveQuarter][description]" class="userContent" id="editor1" cols="30" rows="6"></textarea>

在页面底部，我有：

<script type="text/javascript">
    CKEDITOR.disableAutoInline = true;
    CKEDITOR.replace( 'editor1', {
        extraPlugins: 'sharedspace',
        sharedSpaces: {
            top: 'topSpace',
        }
    });
</script>

它目前在顶部空间中创建工具栏，并具有textarea，但它们都被禁用。我可能只是搞砸了一些配置，但我不确定是什么。

我非常希望使用textarea配置，因为它是表单的一部分，而不是从内联中提取数据。

Answer 1

您可能对使用共享空间插件感兴趣：

addon page，
sample。

我提出这个而不是使用div，因为我对divarea插件有着复杂的感觉。您的原始容器包含编辑器结构，它改变了真实的上下文。 IMO最好使用真正的内联编辑+共享空间功能将工具栏和底栏放在您需要的位置。

<强>更新

当您使用内联编辑器时，您不需要textarea。 Textarea只是一个数据容器，框架或div为基础的编辑自己替换。

内联编辑就是编辑真实的现有元素。所以这可以是你的HTML：

<div id="topSpace"></div>
<div class="userContent" id="editor1"><h1>My page</h1><p>Fooo!</p></div>

和JS：

<script type="text/javascript">
    CKEDITOR.disableAutoInline = true;
    CKEDITOR.inline( 'editor1', {
        extraPlugins: 'sharedspace',
        sharedSpaces: {
            top: 'topSpace',
        }
    } );
</script>

请注意，我使用 CKEDITOR.inline 而不是CKEDITOR.replace。

内联编辑的巨大优势在于<div>是页面上的真实元素 - 它不包装（如在基于div的编辑器中）并且其内容不会移动到框架（如框架中）编辑）。因此，您的内容将继承您网页的样式。

缺点是你需要实现自定义数据保存，因为没有形式。最简单的方法是添加＆＃34; save＆＃34;单击的按钮将通过AJAX将editor.getData()发送到您的服务器。

顺便说一句。您可能会感到困惑的是，在shared spaces sample 2个编辑器中有框架，2个是内联编辑器。所有这些都重复使用一个顶部空间和一个底部空间。

BTW2。要使用内联编辑，您实际上不需要共享空间。然后是＆＃34;浮动工具栏＆＃34;将在此处使用：http://ckeditor.com/demo#inline

使用DIV将类分配给CKEditor

1 个答案: