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

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

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

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

…但我有两个CKEditor实例，它们的高度都是100px

我也试过：

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

。。我收到了错误消息，说明实例已经存在。我四处搜索了一下，发现有人在类似的情况下得到建议，你必须在replace（）之前销毁（）实例，但这似乎太复杂了，不能仅仅设置一个不同的初始高度

最后，我设置了两种不同的配置并复制了toolbar\u 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（）实例化第一个编辑器之后立即对配置设置所做的任何更改实际上都会在接下来的几毫秒内的某个时间点由编辑器应用。我认为这不是正常的行为，也不符合逻辑

例如，您可以通过使用setTimeout（）延迟第二个CKEditor实例来获得我的第一个示例中的预期行为（在第一个编辑器实例化后覆盖

config.height

属性）。Firefox需要100毫秒左右。古怪&错误

---

第一次实例化每个编辑器时，CKEditor应该读取配置设置。现在，每个人都必须克服这个怪癖。

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

$('#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

是一种创建新对象的工具，其原型设置为传递的对象。因此，它们共享所有属性，但您稍后将覆盖的属性除外

更新2:

这是问题中“更新”部分的更新：）

在CKEditor的计时、bug或其他方面没有什么怪癖——它是纯JavaScript、BOM/DOM和浏览器的工作方式以及一些实用的方法

第一件事——90%的BOM/DOM是同步的，但有两件事是不同步的。由于这个原因，整个编辑器必须具有异步性质。这就是为什么它提供了这么多的活动

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

---

总结——我知道这看起来像个bug，但这就是JS/BOM/domlibs的工作方式。我敢肯定，许多其他libs的异步方法也受到同样问题的影响。

上面来自Reinmar的解决方案对我有效，但是我决定再提供一个我在这之前使用过的解决方案

这非常简单，您只需要知道，ckeditor为每个具有几乎相同id的实例创建contentdiv元素，唯一的区别是增量值。所以如果你有2,3,4。。实例之间的唯一差异将是序号。代码如下：

    CKEDITOR.on('instanceReady', function(){
    $('#cke_1_contents').css('height','200px');
}); 

此事件将为您拥有的每个实例激活，因此，如果您想为所有实例设置高度，您可以创建全局变量，并像在

#cke"+x+内容中的x一样使用它

，每次激活事件时，将x增加1，检查行中的哪个实例具有简单if，然后设置高度

    var x=1;
CKEDITOR.on('instanceReady', function(){
    if(x==1) h='200px';
    else if(x==2)h='400px';
    else if(x==3)h='700px';
    $('#cke_'+x+'_contents').css('height',h);
    x++;
}); 

---

这不是最好的解决方案，但它正在发挥作用，问题是您实际上看到content div正在调整大小。

添加此选项后，您将在单个页面中为这两个编辑器提供不同的工具栏

<script>

    CKEDITOR.on('instanceCreated', function (event) {
        var editor = event.editor,
            element = editor.element;

        if (element.is('h1', 'h2', 'h3') || element.getAttribute('id') == 'editorTitle') {
            editor.on('configLoaded', function () {
                // Remove unnecessary plugins to make the editor simpler.
                editor.config.removePlugins = 'find,flash,' +
                    'forms,iframe,image,newpage,removeformat,' +
                    'smiley,specialchar,stylescombo,templates';

                // Rearrange the layout of the toolbar.
                editor.config.toolbarGroups = [
                    { name: 'editing', groups: ['basicstyles'] },
                    { name: 'undo' },
                    //{ name: 'clipboard', groups: ['selection', 'clipboard'] },
                  { name: 'styles' },
                    { name: 'colors' },
                    { name: 'tools' }
                  //  { name: 'about' }
                ];
            });
        }
    });

</script>

CKEDITOR.on（'instanceCreated'，函数（事件）{
var editor=event.editor，
element=editor.element；
if（element.is（'h1'，'h2'，'h3'）| | element.getAttribute（'id'）=='editoritle'））{
on（'configLoaded'，function（）{
//删除不必要的插件以简化编辑器。
editor.config.removePlugins='find，flash，'+
'窗体、iframe、图像、newpage、removeformat，'+
“笑脸、特殊纸条、样式符号、模板”；
//重新排列工具栏的布局。
editor.config.toolbarGroups=[
{name:'编辑'，组：['basicstyles']}，
{name:'undo'}，
//{name:'clipboard'，组：['selection'，'clipboard']}，
{name:'styles'}，
{name:'colors'}，
{name:'tools'}
//{name:'关于'}
];
});
}
});

如果您多次将ckeditor.js添加到页面，可能会导致该问题。 脚本代码必须在每页定义一次。

---

只需使用

CKEDITOR.replaceAll（）
于2019年6月25日更新

请使用此代码添加多个具有自定义高度的CKEditor实例。最简单的方法

  <textarea name="editor1" style="height:30px;" class="ckeditor"></textarea>
   <script type="text/javascript">
      CKEDITOR.replace( 'editor1' );
      CKEDITOR.add            
   </script>

<textarea name="editor2" style="height:40px;" class="ckeditor"></textarea>
   <script type="text/javascript">
      CKEDITOR.replace( 'editor2' );
      CKEDITOR.add            
   </script>

<textarea name="editor3" style="height:50px;" class="ckeditor"></textarea>
   <script type="text/javascript">
      CKEDITOR.replace( 'editor3' );
      CKEDITOR.add            
   </script>

<textarea name="editor4" style="height:60px;" class="ckeditor"></textarea>
   <script type="text/javascript">
      CKEDITOR.replace( 'editor4' );
      CKEDITOR.add            
   </script>

<textarea name="editor5" style="height:70px;" class="ckeditor"></textarea>
   <script type="text/javascript">
      CKEDITOR.replace( 'editor5' );
      CKEDITOR.add            
   </script>


CKEDITOR.replace（'editor1'）；
编辑添加
CKEDITOR.replace（'editor2'）；
编辑添加
克迪特