ckeditor:全屏模式的不同工具栏

时间:2013-07-05 13:59:42

标签: ckeditor

是否可以为标准模式设置不同的工具栏元素,为全屏模式设置不同?

是否有内置选项?

如果没有,是否有任何解决方法而不调整ckeditor.js本身?

1 个答案:

答案 0 :(得分: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起,实现了Advanced Content Filter功能。这意味着更改工具栏将禁用编辑器功能并相应地修改编辑的内容,例如,没有链接按钮→没有链接功能→内容中没有链接→<a>标签被删除。

如果您想在更改工具栏时保留内容,则必须在配置中调整config.allowedContentconfig.extraAllowedContent(请参阅official documentation)。

我希望这会对你有帮助;)