5

次のコードを使用して、自分のページに ckeditor を追加しています。

<textarea class="ckeditor" name="editor1"></textarea>

アプリケーションのすべてのテキストエリアに完全なツールバーが必要なわけではないので、いくつかのツールバー構成を定義したいと思います。必要に応じてデフォルトのツールバー構成をカスタマイズしましたが、これをさらに分解して、一部のテキストエリア用のより基本的なツールバーにしたいと考えています。

class 属性を使用して ckeditor を設定している場合、これを行う方法はありますか?

4

1 に答える 1

2

クラス名で作成されたエディターに異なる構成を設定することはできません。このような場合、グローバルのみCKEDITOR.configが考慮されます。

それでも、この問題には簡単な回避策があります。まず、このスクリプトをドキュメントの先頭に配置します。

<script>
    CKEDITOR.replaceClass = null; // Disable replacing by class
</script>

次のように、置き換えたいそれぞれのdata-custom-configプロパティを ( config.customConfigとして)定義します。<textarea>

<textarea class="ckeditor" data-custom-config="myCustomConfig.js">
    Moo
</textarea>

最後に、次のコードを使用して、エディターをクラス名で手動で置き換えます (クラスが であると仮定しますckeditor)。このコードは、クラスのすべてのテキストエリアを、属性ckeditorで定義された構成によって駆動される CKEditor インスタンスに置き換えます。data-custom-config

var textareas = Array.prototype.slice.call( document.getElementsByClassName( 'ckeditor' ) ),
    textarea, cfg, customCfg;

while ( ( textarea = textareas.pop() ) ) {
    textarea = new CKEDITOR.dom.element( textarea );
    cfg = {};

    if ( ( customCfg = textarea.getAttribute( 'data-custom-config' ) ) )
       cfg[ 'customConfig' ] = customCfg;

    CKEDITOR.replace( textarea.getId(), cfg )
}

そして今、一番上にチェリーが来ます。カスタム ツールバーの設定を次の場所に配置しmyCustomConfig.jsます。

CKEDITOR.editorConfig = function( config ) {
    config.toolbar = [
        { name: 'basicstyles', items: [ 'Bold', 'Italic' ] }
    ];
};

もちろん、このコードを変更して jQuery を使用して要素を簡単に選択したり、代わりにオブジェクト リテラルを使用したりできますconfig.customConfig。これは、問題を解決する方法の単なるショーケースです。

于 2013-07-22T09:14:57.723 に答える