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

Question

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

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

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

...但是我得到了两个高度均为 100px 的 CKEditor 实例。

我也试过这个:

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

.. 我收到实例已存在的错误消息。我四处搜索了一下，发现有类似情况的人得到的建议是您必须在 replace() 之前销毁 () 实例，但这对于设置不同的 initial 高度来说似乎太复杂了。

最后我设置了两个不同的配置并复制了 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 需要 ~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 });

据我所知，不可能即时更改编辑器的高度。

如果这些方法对您不起作用，那么您做错了什么。

更新:

回答您的评论 - 您的问题实际上不是关于 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 和浏览器的工作方式以及一些实用的方法。

首先 - 90% 的 BOM/DOM 是同步的，但有几件事不是。因此，整个编辑器必须具有异步特性。这就是它提供这么多事件的原因。

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

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