如何爲不同高度的多個實例設置CKEditor？

Question

我想基於相同的配置設置，但具有不同高度的CKEditor的多個實例。我試圖建立配置使用默認的高度，建立了第一個實例，然後重寫高度&設立的第二個實例：

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

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

...但我得到兩個CKEditor的情況下，這兩個具有100像素高度。

我也試過這樣：

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

..我得到的實例已經存在錯誤消息。我搜索了一下&發現有人在類似的情況下得到的建議是你必須在replace（）之前銷燬實例（），但是這似乎太複雜了，因爲只設置了不同的初始高度。

在我設置複製了toolbar_Full物業兩種不同CONFIGS &末：

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（）是實際上在一些點在以下幾毫秒編輯器應用。我認爲這不是正常的行爲，也不合邏輯。例如，你可以在我的第一個例子中得到預期的行爲（在第一個編輯器被實例化之後覆蓋config.height屬性）通過使用setTimeout（）延遲第二個CKEditor實例來工作。 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 }); 

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庫工作。我很確定許多其他庫的異步方法都受到相同問題的影響。從上面的Reinmar

Answer 2

的解決方案是爲我工作，但我決定給1級更多的解決方案，我這個人之前使用。

這真的很簡單，所有你需要知道的是，CKEditor的創建內容的div元素的每個實例幾乎相同的ID，唯一的區別是增加值。所以如果你有2,3,4個實例，唯一的區別就是序號。代碼是在這裏：

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

此事件將被激活，你有充分的情況下，所以如果你想設置高度爲所有的情況下，你可以創建一個全局變量和#cke_"+x+"contents使用它像X，每次事件被激活將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 3

添加這個，你會得到兩個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 4

如果添加ckeditor.js到超過頁一次也一樣，它可能會導致問題。 腳本代碼必須在每一頁定義一次。 <script type="text/javascript" src="Fck342/ckeditor.js"></script>

Answer 5

只使用CKEDITOR.replaceAll();