Question

我正在试图弄清楚如何创建一个ckeditor实例，工具栏附加到我正在创建实例的DIV中的单独DIV。我在config数组中看到你可以设置config.sharedSpaces = {top：'divid'}（至少在旧版本中你可以），但我不能在配置页面上这样做，它需要在页面上完成我正在创建实例。有谁知道怎么做？

以下是我创建实例的方法：

CKEDITOR.replace( 'editor', {
        toolbarGroups: [
            { name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
            { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
            { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
            { name: 'colors' },
            { name: 'styles'},
            { name: 'paragraph', groups: [ 'list', 'align' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote' ] },
            { items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar' ] },
            { name: 'links' },
            { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
            { name: 'tools'}
        ]
    });

是的我确实知道我可以使用clone（）而不是什么，但我希望有更清洁的解决方案。

Answer 1

CKEditor 4.0中没有共享空间功能。它将很快在CKEditor 4.1中重新推出 - 请参阅the ticket（它已合并到major）。

Answer 2

在初始化编辑器之前，请写下：

<script>
CKEDITOR.config.sharedSpaces = {
    'top' : 'myToolbar',
    };
</script>

如果共享空间插件不可用，请从http://ckeditor.com/addon/sharedspace

下载

Answer 3

对于CKEditor 4.1+，您可以使用可选的Shared Space插件（需要added to your CKEditor build）。

<div id="top">
    <!-- This div will handle all toolbars. -->
</div>

<div>
    <textarea id="editor1" name="editor1">My editor content</textarea>
</div>

<script>
    CKEDITOR.replace( 'editor1', {
        // Configure CKEditor to use the Shared Space plugin.
        extraPlugins: 'sharedspace',
        // The Resize plugin does not make sense in this context.
        removePlugins: 'resize',
        sharedSpaces: {
            // Configure the editor instance to place the toolbar in the div id='top'.
            top: 'top'
        }
    } );
</script>

请参阅带有代码示例的"Shared Toolbar and Bottom Bar" documentation和带有要复制的源代码的working demo＆amp;下载。

CKEDITOR 4.0动态分离工具栏

3 个答案: