1

標準モードとフルスクリーン モードで異なるツールバー要素を使用することは可能ですか?

そのための組み込みオプションはありますか？

そうでない場合、ckeditor.js自体を微調整せずに回避策はありますか?

4

1 に答える 1

2

申し訳ありませんが、全画面表示を含め、ランタイム中にツールバーを変更する方法はありません。別のツールバーを使用するには、エディターを破棄し、editor.destroy()別の構成で新しいエディターを作成する必要があります。

回避策

これは簡単ではありませんが、次のように仮定すると、次のように問題を回避できます<textarea id="editor1">。

// Custom config for maximized editor.
var maximizedConfig = {
    toolbarGroups: [
        {
            name: 'maximized',
            groups: [
                'basicstyles',
                'clipboard',
                'undo',
                'tools'
            ]
        }
    ]
};

var createEditor = (function() {

    var editor;

    function invokeInstance( state ) {
        // Destroy the instance if it exists.
        editor && editor.destroy();

        // Create a new instance
        editor = CKEDITOR.replace( 'editor1', CKEDITOR.tools.extend( {
            on: {
                instanceReady: function () {
                    // If it wasn't maximized, maximize the instance.
                    if ( state === CKEDITOR.TRISTATE_OFF )
                        this.execCommand( 'maximize' );

                    // When clicking maximize button, create a new instance
                    // with a desired maximization state.
                    this.commands.maximize.once( 'exec', function( evt ) {
                        CKEDITOR.tools.setTimeout( function( state ) {
                            createEditor( state );
                        }, 0, null, this.state );

                        return false;
                    } );
                }
            }

            // Use different configs according to the maximization state.
        }, state === CKEDITOR.TRISTATE_OFF ? maximizedConfig : {} ) );
    };

    return function( state ) {
        // If there's some working instance of the editor...
        if ( editor ) {
            // If it was maximized...
            if ( state == CKEDITOR.TRISTATE_ON ) {

                // Create the new instance once de-maximized.
                editor.once( 'maximize', function( evt ) {
                    invokeInstance( state );
                } );

                // Un-maximize the instance.
                editor.execCommand( 'maximize' );
            }

            // If it wasn't maximized, basically create a new one.
            else
                invokeInstance( state );
        }

        // If there is NO working instance, create a new one.
        else
            invokeInstance();
    };
})();

// Create the first editor.
createEditor();

説明の言葉

このコードは、最大化ボタンのクリックを監視し、ユーザーがボタンをクリックすると、カスタム ツールバー構成で最大化された新しいエディター インスタンスを作成します。

インスタンスがすでに最大化されている場合、ボタンをクリックすると、デフォルトのツールバー構成で新しい「最小化」インスタンスが作成されます。

最終的な注意事項

注 #1 : 新しいインスタンスは常に作成されるため、選択は失われ (それを保持するには多くのコードを追加する必要があります)、他のものも失われます。これはある種のトレードオフです。

注 #2 : CKEditor 4.1 以降、高度なコンテンツ フィルター機能が実装されています。これは、ツールバーを変更するとエディター機能が無効になり、それに応じて編集されたコンテンツが変更されることを意味します。たとえば、リンク ボタンなし → リンク機能なし → コンテンツ内のリンクなし →<a>タグが削除されます。

ツールバーを変更するときに内容を保持したい場合は、構成でconfig.allowedContentまたはを調整する必要config.extraAllowedContentがあります (公式ドキュメントを参照してください)。

これがあなたを助けることを願っています;）

于 2013-07-06T08:40:54.720 に答える