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

Question

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

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

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

...但是我得到两个CKEditor实例,它们的高度均为100px.

我也试过这个:

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',
    startupOutlineBlocks:true,
    scayt_autoStartup:true
};
config2.toolbar_Full = config1.toolbar_Full;

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

有没有更好的办法？我缺少什么？有这个问题,但他们没有发布足够有用,这个非常相似的问题没有得到回答.谢谢!

更新:

这似乎是CKEditor的计时/配置处理怪癖 - 稍后读取和应用配置(我猜测编辑器的DOM框架已经建立),而不是编辑器首次实例化时.

因此,在使用.ckeditor()实例化第一个编辑器之后立即对配置设置所做的任何更改实际上都是由编辑器在接下来的几毫秒内应用的.我认为这不是正常行为,也不符合逻辑.

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

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

Answer 1

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

$('#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,
        scayt_autoStartup: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和浏览器如何工作以及一些实用的方法.

首先--90%的BOM/DOM是同步的,但有一些事情并非如此.因为整个编辑器必须具有异步性质.这就是它提供如此多事件的原因.

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

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