javascript – 如何为不同高度的多个实例设置CKEditor？

我想要有多个基于相同配置设置的CKEditor实例,但具有不同的高度.我尝试设置默认高度的配置,设置第一个实例,然后覆盖高度&设立第二例：

var config = {
    .....
    height:'400'
};

$('#editor1').ckeditor(config);
config.height = '100';
$('#editor2').ckeditor(config);

…但是我得到两个都有100px高的CKEditor实例.

我也试过这个：

CKEDITOR.replace('editor2',{
    height: '100'
});

..我收到错误消息,该实例已经存在.我搜索了一下发现一个类似情况的人得到建议,你必须在replace()之前摧毁()实例,但这似乎太复杂,只是设置不同的初始高度.

最后我设置了两个不同的配置复制到toolbar_Full属性：

var config1 = {
    height:'400',startupOutlineBlocks:true,scayt_autoStartup:true,toolbar_Full:[
        { name: 'clipboard',items : [ 'Cut','copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },{ name: 'editing',items : [ 'Find','Replace','-' ] },{ name: 'basicstyles',items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','RemoveFormat' ] },{ name: 'paragraph',items : [ 'NumberedList','BulletedList','Outdent','Indent','Blockquote','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','BidiLtr','BidiRtl' ] },'/',{ name: 'links',items : [ 'Link','Unlink','Anchor' ] },{ name: 'insert',items : [ 'Image','HorizontalRule' ] },{ name: 'styles',items : [ 'Styles','Format','Font','FontSize' ] },{ name: 'colors',items : [ 'TextColor','BGColor' ] },{ name: 'tools',items : [ 'Maximize','ShowBlocks' ] },{ name: 'document',items : [ 'Source' ] }
    ]
}

var config2 = {
    height:'100',scayt_autoStartup:true
};
config2.toolbar_Full = config1.toolbar_Full;

$('#editor1').ckeditor(config1);
$('#editor2').ckeditor(config2);

有没有更好的办法？我失踪了吗有this question,但他们没有发布足够有用,& this very similar question尚未得到答复.谢谢！

更新：

这似乎是CKEditor的时间/配置处理奇怪 – 配置是读&稍后应用(我猜测编辑器的DOM框架已经设置好了),而不是当编辑器首次实例化时.

所以,使用.ckeditor()实例化第一个编辑器之后立即进行的配置设置的任何更改实际上都是在几个毫秒的某个时间被编辑器应用的.我认为这不是正常的行为或逻辑.

例如,您可以在我的第一个示例中获得预期的行为(在第一个编辑器被实例化之后覆盖config.height属性)通过使用setTimeout()延迟第二个CKEditor实例来工作. Firefox需要〜100ms,IE需要1ms.古怪&错误.

每个编辑器首次实例化时,CKEditor应读取配置设置.现在,每个人都必须解决这个怪癖.

解决方法

使用自定义高度初始化两个编辑器的最简单方法是：

$('#editor1').ckeditor({ height: 100 });
$('#editor2').ckeditor({ height: 200 });

或没有jQuery：

CKEDITOR.replace('editor1',{ height: 100 });
CKEDITOR.replace('editor2',{ height: 200 });

AFAIK不可能随时更改编辑器的高度.

如果这些方法不适合你,那么你做错了.

更新：

回答你的意见 – 你的问题实际上不是关于CKEditor,而是关于共享一个只有两个不同属性的对象.所以你可以这样尝试：

var configShared = {
        startupOutlineBlocks:true,// etc.
    },config1 = CKEDITOR.tools.prototypedcopy(configShared),config2 = CKEDITOR.tools.prototypedcopy(configShared);
config1.height = 100;
config2.height = 200;

CKEDITOR.replace('editor1',config1);
CKEDITOR.replace('editor2',config2);

CKEDITOR.tools.prototypedcopy是一个创建新对象的工具,原型设置为已传递的对象.所以他们共享所有属性,除了这些你稍后重写.

更新2：

这是问题:)中“更新”部分的更新.

CKEditor的时间或错误或无论如何 – 它是纯JavaScript,BOM / DOM和浏览器如何工作以及一些实用的方法.

第一件事–BOM / DOM的90％是同步的,但有几件事情不是.因为这个整个编辑器必须具有异步性质.这就是为什么它提供了这么多的事件.

第二件事 – 在JS对象中通过引用传递,我们希望CKEditor非常快速地初始化,我们应该避免不必要的任务.其中之一是复制配置对象(没有很好的理由).所以为了节省一些msecs(并且因为异步插件加载)CKEditor仅通过将其原型设置为包含默认选项的对象来扩展传递的配置对象.

总结 – 我知道这可能看起来像一个错误,但它是JS / BOM / DOM库的工作原理.我很确定许多其他libs的异步方法受同一个问题的影响.

javascript – 如何为不同高度的多个实例设置CKEditor？

解决方法

相关推荐