ckeditor - ckeditor：全屏模式的不同工具栏

Question

标准模式是否可以有不同的工具栏元素，而全屏模式可以有不同的工具栏元素？

有内置选项吗？

如果没有，是否有任何不调整 ckeditor.js 本身的解决方法？

Answer 1

很抱歉，但在运行时无法更改工具栏，无论如何，包括全屏视图。您需要销毁编辑器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();

一些解释的话

This code observes maximize button click, and creates a new, maximized editor instance with custom toolbar config, when user clicks the button.

If the instance is already maximized, clicking the button creates a new "minimized" instance with default toolbar config.

Final notes

Note #1: Since a new instance is always created, the selection is lost (lots of code needs to be added to preserve it) and other stuff also is gone. This is some kind of a trade-off.

Note #2: Since CKEditor 4.1, the Advanced Content Filter feature is implemented. It means that changing the toolbar will disable editor features and accordingly modify the edited contents, e.g. no link button → no link feature → no links in contents → <a> tags stripped out.

If you want to preserve the contents when changing toolbars, you got to adjust config.allowedContent or config.extraAllowedContent in your configurations (see the official documentation).

I hope this will help you ;)