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

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

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

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

有没有更好的办法？我有什么想念的吗？有this question，但是他们发布的内容不够有用，＆this very similar question尚未得到答复。谢谢!

更新:

这似乎是CKEditor的时间/配置处理怪癖-稍后读取并应用配置(我猜是在设置编辑器的DOM框架之后)，而不是在第一次实例化编辑器时。

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

例如，通过延迟setTimeout()延迟第二个CKEditor实例，可以在我的第一个示例中实现预期的行为(实例化第一个编辑器后覆盖config.height属性)。 Firefox需要大约100毫秒，IE需要1毫秒。古怪与错误。

首次实例化每个编辑器时，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,
        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是一种工具，可以创建原型(prototype)设置为传递的对象的新对象。因此，它们共享所有属性，但您稍后覆盖的属性除外。

更新2:

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

CKEditor的时间安排，错误或任何形式均无任何怪异-纯粹的JavaScript以及BOM/DOM和浏览器的工作方式以及一些实用的方法。

第一件事-BOM/DOM的90％是同步的，但有些事情不是同步的。因此，整个编辑器必须具有异步特性。这就是为什么它提供了这么多事件的原因。

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

总结-我知道这看起来像个bug，但这就是JS/BOM/DOM库的工作方式。我很确定其他许多lib的异步方法也会受到同一问题的影响。

关于javascript - 如何为具有不同高度的多个实例设置CKEditor？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11124182/