Question

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

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

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

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

我也试过这个：

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

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

最后我设置了两个不同的配置＆amp;复制到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的定时/配置处理怪癖 - 配置被读取＆amp;稍后应用（我猜测编辑器的DOM框架已经设置完毕），而不是在编辑器首次实例化时。

因此，在使用.ckeditor（）实例化第一个编辑器之后立即对进行的配置设置的任何更改实际应用编辑器在以下的某个时刻几毫秒。我认为这不是正常行为，也不符合逻辑。

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

首次实例化每个编辑器时，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库的工作方式。我很确定许多其他lib的异步方法都会受到同样的问题的影响。

Answer 2

添加此项，您将获得单页CKEDitor的不同工具栏

<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>

Answer 3

Reinmar上面的解决方案对我有用，但我决定再提供一个我在此之前使用的解决方案。

这很简单，你需要知道的是ckeditor为每个具有几乎相同id的实例创建内容div元素，唯一的区别是增量值。因此，如果你有2,3,4 ..实例，只有差异将是序数。代码在这里：

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

此事件将针对您拥有的每个实例激活，因此如果您想为所有实例设置高度，您可以创建全局变量并在#cke_"+x+"contents中使用x，就像每次激活事件时一样增加x为1 ，检查行中的哪个实例是否为simple，然后设置高度。

    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++;
});

这不是最佳解决方案，但它正在运行，问题是您实际上看到内容div调整大小。

Answer 4

如果您多次将ckeditor.js添加到页面，则可能会导致该问题。必须在每个页面中定义一次脚本代码。 <script type="text/javascript" src="Fck342/ckeditor.js"></script>

Answer 5

只需使用CKEDITOR.replaceAll();

Answer 6

更新2019年2月3日星期日。

请使用此代码添加多个CKEditor。有史以来最简单的方法。

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

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

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

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

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

参考：Here

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

6 个答案: