12

同じ構成設定に基づいて、高さが異なる CKEditor の複数のインスタンスが必要です。デフォルトの高さで構成を設定し、最初のインスタンスを設定してから、高さをオーバーライドして2番目のインスタンスを設定しようとしました:

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

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

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

私もこれを試しました：

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

.. インスタンスが既に存在するというエラー メッセージが表示されました。少し調べてみたところ、同様の状況にある人が、replace() の前にインスタンスを destroy() する必要があるというアドバイスを得ていることがわかりましたが、初期の高さを変更するだけでは複雑すぎるようです。

最後に、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たとえば、setTimeout() を使用して 2 番目の CKEditor インスタンスを遅らせることで、最初の例 (最初のエディターがインスタンス化された後にプロパティをオーバーライドする) で期待される動作を得ることができます。Firefox では最大 100 ミリ秒、IE では 1 ミリ秒が必要でした。奇抜で間違っています。

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

4

6 に答える 6

23

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

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

またはjQueryなし：

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

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

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

アップデート：

あなたのコメントへの回答 - 実際、あなたの質問は CKEditor に関するものではなく、1 つのオブジェクトを 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% は同期していますが、そうでないものもいくつかあります。このため、エディター全体が非同期の性質を持つ必要があります。そのため、非常に多くのイベントを提供しています。

2 つ目 - JS オブジェクトは参照によって渡され、CKEditor を非常に迅速に初期化する必要があるため、不要なタスクを避ける必要があります。これらの 1 つは、(正当な理由なしに) 構成オブジェクトをコピーすることです。したがって、いくつかのミリ秒を節約するために (また、非同期プラグインの読み込みも行われるため)、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 に答える
0

ただ使うCKEDITOR.replaceAll();

于 2015-09-22T06:50:08.597 に答える