1

与 IFRAME 相比，我在 DIV 模式下使用 CKEditor，并且我试图为编辑器本身分配一个类。我找到了将它添加到编辑器中的位置，但不是编辑器本身。而且，我宁愿不将编辑器包装在另一个 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 配置，因为它是表单的一部分，而不是从内联中提取数据。

4

1 回答 1

2

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

我提议这个而不是使用 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 的编辑器中）并且其内容不会移动到框架中（如在框架编辑器中）。因此，您的内容将继承页面的样式。

缺点是需要实现自定义数据保存，因为没有表单。最简单的方法是添加一个“保存”按钮，单击该按钮将editor.getData()通过 AJAX 发送到您的服务器。

顺便提一句。您可能对以下事实感到困惑：在共享空间示例中，有 2 个编辑器是框架式的，而 2 个是内联的。它们都重复使用了一个顶部空间和一个底部空间。

顺便说一句。要使用内联编辑，您实际上不需要共享空间。然后将使用“浮动工具栏”，如下所示：http: //ckeditor.com/demo#inline

于 2013-05-02T09:27:37.560 回答