Javascript CKEDITOR 4.0动态分离工具栏
我试图弄清楚如何创建一个ckeditor实例,其中工具栏连接到一个独立的DIV,而不是我正在创建实例的DIV。我看到在配置数组中可以设置config.sharedSpaces={top:'divid'}(至少在旧版本中可以),但我不能在配置页面上这样做,需要在创建实例的页面上这样做。有人知道怎么做吗 以下是我创建实例的方式:Javascript CKEDITOR 4.0动态分离工具栏,javascript,jquery,ckeditor,toolbar,Javascript,Jquery,Ckeditor,Toolbar,我试图弄清楚如何创建一个ckeditor实例,其中工具栏连接到一个独立的DIV,而不是我正在创建实例的DIV。我看到在配置数组中可以设置config.sharedSpaces={top:'divid'}(至少在旧版本中可以),但我不能在配置页面上这样做,需要在创建实例的页面上这样做。有人知道怎么做吗 以下是我创建实例的方式: CKEDITOR.replace( 'editor', { toolbarGroups: [ { name: 'document',
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()等等,但我希望有一个更干净的解决方案。共享空间功能在CKEditor 4.0中不可用。它将很快在中重新引入-请参见(它已合并到)。在初始化编辑器之前,请编写以下内容:
<script>
CKEDITOR.config.sharedSpaces = {
'top' : 'myToolbar',
};
</script>
CKEDITOR.config.sharedSpaces={
“顶部”:“我的工具栏”,
};
如果SharedSpace插件不可用,请从适用于CKEditor 4.1+的下载它,您可以使用可选插件(需要)
我的编辑内容
CKEDITOR.replace('editor1'{
//配置CKEditor以使用共享空间插件。
extraPlugins:'sharedspace',
//在这种情况下,调整大小插件没有意义。
removePlugins:“调整大小”,
共享空间:{
//配置编辑器实例以将工具栏放置在div id='top'中。
顶部:“顶部”
}
} );
请参阅带有代码示例的和带有要复制和下载的源代码的。此功能已包含在4.1版中。
<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>