12

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

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

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

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

我也试过这个:

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

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

最后,我设置了两个不同的配置并复制了 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 需要约 100 毫秒,IE 需要 1 毫秒。古怪和错误。

CKEditor 应该在每个编辑器第一次实例化时读取配置设置。目前,每个人都必须解决这个怪癖。

4

6 回答 6

23

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

$('#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 快速初始化,我们应该避免不必要的任务。其中之一是复制配置对象(没有充分的理由)。因此,为了节省一些毫秒(并且因为异步插件也加载了)CKEditor 仅通过将其原型设置为包含默认选项的对象来扩展传递的配置对象。

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

于 2012-06-20T17:49:16.913 回答
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>
于 2014-09-04T10:36:45.407 回答
1

Reinmar 的上述解决方案对我有用,但是我决定再提供 1 个我在此之前使用的解决方案。

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

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

此事件将为您拥有的每个实例激活,因此如果您想为所有实例设置高度,您可以创建全局变量并像 x in 一样使用它#cke_"+x+"contents,每次激活事件时将 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++;
}); 

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

于 2013-06-27T18:31:35.020 回答
1

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>

参考:这里

于 2019-02-02T20:23:24.497 回答
0

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

于 2014-10-24T11:24:56.703 回答
0

只需使用CKEDITOR.replaceAll();

于 2015-09-22T06:50:08.597 回答