web-dev-qa-db-ja.com

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

同じ構成設定に基づいて、高さの異なるCKEditorの複数のインスタンスが欲しいのですが。デフォルトの高さでconfigを設定し、最初のインスタンスを設定してから、高さを上書きして2番目のインスタンスを設定しようとしました。

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

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

...しかし、両方とも高さが100pxの2つのCKEditorインスタンスを取得します。

私もこれを試しました：

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

..インスタンスがすでに存在するというエラーメッセージが表示されました。私は少し周りを検索して、同じような状況の誰かがreplace（）の前にインスタンスをdestroy（）しなければならないというアドバイスを得たが、別のinitial高さ。

最後に、2つの異なる構成を設定し、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プロパティは、最初のエディタがインスタンス化された後）、2番目のCKEditorインスタンスをsetTimeout（）で遅延させることで機能します。 Firefoxには約100ミリ秒、IEには1ミリ秒必要でした。奇抜で間違っています。

CKEditorは、各エディターが最初にインスタンス化されるときに構成設定を読み取る必要があります。現時点では、誰もがその癖を回避する必要があります。

javascriptheightckeditormultiple-instances
12
Wick

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

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

またはjQueryなし：

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

私の知る限り、その場でエディタの高さを変更することはできません。

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

更新：

あなたのコメントへの回答-あなたの質問は実際にはCKEditorに関するものではなく、2つの異なるプロパティのみを持つ1つのオブジェクトを共有することに関するものでした。だからあなたはこのように試すことができます：

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％は同期ですが、同期していないものもいくつかあります。このため、エディタ全体が非同期の性質を持つ必要があります。これが、非常に多くのイベントを提供する理由です。

2番目のこと-JSオブジェクトは参照によって渡され、CKEditorを非常に迅速に初期化するため、不要なタスクを回避する必要があります。これらの1つは（正当な理由なしに）構成オブジェクトをコピーすることです。したがって、いくつかのミリ秒を節約するために（そして非同期プラグインもロードするため）、CKEditorは、プロトタイプをデフォルトオプションを含むオブジェクトに設定することによってのみ、渡された構成オブジェクトを拡張します。

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

20
Reinmar

これを追加すると、単一ページで両方の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>
2
Mahesh Shelar Patil

Ckeditor.jsを複数回ページに追加すると、その問題が発生する可能性があります。スクリプトコードは、すべてのページで1回定義する必要があります。 <script type="text/javascript" src="Fck342/ckeditor.js"></script>

0
CodeRunner

上記のReinmarのソリューションがうまくいきましたが、このソリューションの前に使用したソリューションをもう1つ追加することにしました。

それは本当に簡単です。あなたが知る必要があるのは、ckeditorがほぼ同じIDを持つすべてのインスタンスのコンテンツdiv要素を作成することです。唯一の違いは増分値です。したがって、2、3、4 ..インスタンスがある場合、違いは序数のみになります。コードはここにあります：

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

このイベントはすべてのインスタンスでアクティブになるため、すべてのインスタンスの高さを設定したい場合は、グローバル変数を作成してxのように使用できます#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のサイズ変更を確認することです。

0
Mr Br

CKEDITOR.replaceAll();を使用するだけです

0
jmnerd

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>

参照： ここ

0
waqas khan