如何设置的CKEditor为具有不同高度的多个实例?(How to set up CKEditor

2019-06-25 15:39发布

我想基于相同的配置设置有CKEditor的多个实例,但具有不同的高度。 我试着设置了默认的高度配置 ,建立了第一个实例,然后重写高度和设立第二个实例:

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

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

...但我得到两个CKEditor的情况下,这两个有100px的高度。

我也试过这样:

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

..我得到的实例已经存在错误消息。 我搜索了一下周围及发现有人在类似的情况了,你必须摧毁()实例之前更换()的意见,但似乎只是设置不同的初始高度太复杂了。

最后,我设置了两个不同的CONFIGS和复制了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的情况下工作()。 火狐需要100毫秒〜,IE需要1毫秒。 古怪与错。

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是创建与原型设置为通过一个新对象的工具。 因此,他们分享的所有属性,除了这些你以后覆盖。

更新2:

这是问题:)“更新”部分进行更新。

有一个在CKEditor的的时间或错误或没有任何怪癖 - 它是纯JavaScript,以及如何BOM / DOM和浏览器的工作加上一些实用的方法。

第一件事情 - 90%的BOM / DOM的是同步的,但也有几件事情都没有。 因为这整个编辑必须具有异步特性。 这就是为什么它提供了这么多的事件。

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

总结 - 我知道这可能看起来像一个错误,但它是如何JS / BOM / DOM库工作。 我敢肯定,许多其他库异步方法由同一问题的影响。



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为我工作,但我决定给1级更多的解决方案,我这个人之前使用。

这真的很简单,所有你需要知道的是,CKEditor的创建内容的div元素的每个实例几乎相同的ID,唯一的区别是增加值。 所以,如果你有2,3,4 ..实例唯一的区别是序数。 代码是在这里:

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

此事件会为你每一个实例被激活,所以如果你想设置高度为所有的情况下,你可以创建一个全局变量和使用它像X #cke_"+x+"contents ,每一次事件被激活的增加量X 1,检查哪些实例行是简单,如果再设置高度。

    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>

参考: 这里



文章来源: How to set up CKEditor for multiple instances with different heights?