高さの異なる複数のインスタンスに対してCKEditorを設定するにはどうすればよいですか？

Question

私はCKEditorの複数のインスタンスを、同じ設定値に基づいていますが、高さが異なるようにしたいと思います。私は、2番目のインスタンスの設定高さ&をオーバーライドし、第一のインスタンスを設定し、デフォルトの高さと設定を設定してみました：

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

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

を...しかし、私は両方とも100pxに高さを持つ2つのCKEditorバージョンのインスタンスを取得します。

また、私はこれを試してみました：

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

..私はインスタンスがすでに存在していたエラーメッセージを得ました。私はちょっと調べました&似たような状況にいる人が、replace（）の前にインスタンスを破棄しなければならないというアドバイスがありましたが、ちょうど別のものを設定するには複雑すぎるようです。の高さです。私は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バージョンの癖を扱うタイミング/ configにあると思われる - 設定は、&を後で適用読み込まれる（エディタのDOMフレームワークが設定された後、私は推測している）のではなくエディタが最初にインスタンス化されるとき。

ので、コンフィグ設定を変更）は、（第一エディタは.ckeditorでインスタンス化され、すぐに後を作っ実際には、次の数ミリ秒である時点でエディタによってを適用しています。私はこれが通常の行動ではない、または論理的ではないと主張したい。

たとえば、第1の例（最初のエディターのインスタンス化後にconfig.heightプロパティをオーバーライド）で、setTimeout（）を使用して2番目のCKEditorインスタンスを遅延させることで、動作を期待できます。 Firefoxは~100ms必要、IEは1ms必要。 Wacky &が間違っています。

各エディタが最初にインスタンス化されるときに、CKEditorは設定を読みます。今のところ、誰もがその奇妙なことを回避しなければならない。

Answer 1

カスタムの高さを持つ2つのエディタを初期化する最も簡単な方法は次のとおりです。

$('#editor1').ckeditor({ height: 100 }); 
$('#editor2').ckeditor({ height: 200 }); 

かのjQueryなし：

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

その場で編集者の高さを変更することはできません私の知る限り。

これらの方法がうまくいかない場合は、sth elseを間違って実行していました。

アップデート： - 実際には、あなたの質問はCKEditorバージョンについてではなかったのではなく、2つだけ異なる特性を一つのオブジェクトを共有について

あなたのコメントに答えます。だから、このように試すことができます：

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、ブラウザの仕組みに加え、いくつかの実用的なアプローチがあります。

最初のもの - BOM/DOMの90％は同期ですが、そうでないものがいくつかあります。このため、エディタ全体が非同期性を持つ必要があります。だからそれは非常に多くのイベントを提供する理由です。

JSオブジェクトの第2の事柄は参照によって渡され、CKEditorが非常に迅速に初期化したいので不要な作業を避けるべきです。これらのうちの1つは、（理由がなければ）設定オブジェクトをコピーすることです。したがって、いくつかのmsec（および非同期プラグインがロードされているため）を保存するために、CKEditorはプロトタイプをデフォルトオプションを含むオブジェクトに設定するだけで、渡されたconfigオブジェクトを拡張します。

要約 - これはバグのように見えるかもしれませんが、JS/BOM/DOMライブラリの動作方法です。私は他の多くのlibsの非同期メソッドが同じ問題の影響を受けることは確かです。

Answer 2

Reinmarの上記の解決策は私のために働いていますが、私はこの前に使った1つの解決策をもう1つ与えることにしました。

これは本当にシンプルなので、ckeditorはほとんど同じIDのインスタンスごとにコンテンツdiv要素を作成しますが、違いは増分値だけです。だから、あなたが2,3,4 ..インスタンスを持っている場合、唯一の違いは順序番号です。コードはここにある：

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

このイベントは、あなたが持っているすべてのインスタンスに対して有効化されますので、あなたはすべてのインスタンスの高さを設定したい場合は、グローバル変数を作成し、#cke_"+x+"contentsでの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++; 
}); 

これが最善の解決策ではありませんが、それが働いている、問題は、あなたが実際にコンテンツのdivのサイズ変更を参照してくださいです。

Answer 3

それが問題を引き起こす可能性があり、あなたがより多くのページにckeditor.jsを追加する場合は、一度あまりにも単一のページ

<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バージョンごとに異なるツールバーを取得します、これを追加します。 スクリプトコードはすべてのページで一度定義する必要があります。 <script type="text/javascript" src="Fck342/ckeditor.js"></script>

Answer 5

ちょうど私はまだかかわらず、他のすべてのconfig設定が必要CKEDITOR.replaceAll();