Ckeditor修改表格单元格边框，如MS Word

我需要对单个表单元格应用边框。为此，我构建了一个插件。 我的问题是，我可以添加一个边框，例如border bottom，但是如果我也要添加border right，border bottom会被删除，并且每个单元格只能获得一个边框

我希望能够在一个单元格中添加多个边框。 如果我再次单击例如border bottom，则只应删除border bottom样式，而不应删除整个样式

我希望你能帮助我，这对我很重要

代码如下：

/**
 * Basic sample plugin inserting current date and time into CKEditor editing area.
 */

// Register the plugin with the editor.
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.plugins.html
CKEDITOR.plugins.add( 'cellborder',
{
    requires: 'menubutton',
    icons: 'border_bottom,border_double_bottom,border_left,border_outer,border_right,border_top,border_none',
    // The plugin initialization logic goes inside this method.
    // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.pluginDefinition.html#init
    init: function( editor ) {
        var borderouter = ( editor.config.borderTypeList || [ 'border_bottom:border bottom:border-bottom:1px solid black',
                'border_top:border top:border-top:1px solid black',
                'border_right:border right:border-right:1px solid black',
                'border_left:border left:border-left:1px solid black',
                'border_double_bottom:border double bottom:border-bottom:3px double black'] ),
            plugin = this,
            items = {},
            parts,
            curBorderType,
            i;

        // Registers command.
        editor.addCommand( 'border', {
            allowedContent : 'table tr th td[style]{*} caption;',
            contextSensitive: true,
            exec: function( editor, item) {
                if ( item )
                    editor[ item.style.checkActive( editor.elementPath() ) ? 'removeStyle' : 'applyStyle' ]( item.style );
            },

            remove: function(editor){
                editor.removeStyle();
            },

            refresh: function( editor, path ) {
                if(path.contains('table')){
                    var curStyle = plugin.getCurrentBorderType( editor );
                    if ( curStyle ){
                        var att = curStyle.getAttribute( 'style' );
                        if(att){
                            var parts = att.split( ':' );
                            this.setState( parts[0].indexOf('border') == 0 ? CKEDITOR.TRISTATE_ON : CKEDITOR.TRISTATE_OFF );
                        }
                        else
                            this.setState(CKEDITOR.TRISTATE_OFF );
                    }
                    else
                        this.setState(CKEDITOR.TRISTATE_OFF );
                }
                else
                    this.setState(CKEDITOR.TRISTATE_DISABLED);
            }
        } );

        // Parse borderConfigStrings, and create items entry for each border.
        for ( i = 0; i < borderouter.length; i++ ) {
            parts = borderouter[ i ].split( ':' );
            curBorderType = parts[ 2 ];
            items[ parts[ 0 ] ] = {
                label: parts[ 1 ],
                borderType: curBorderType,
                itemName : parts[0],
                group: 'border_outer',
                icon: parts[ 0 ],
                order: i,
                onClick: function() {
                    editor.execCommand( 'border', this);
                },
                role: 'menuitemcheckbox'
            };

            // Init style property.
            items[ parts[ 0 ] ].style = new CKEDITOR.style( {
                element: 'td',
                attributes: {
                    style:  curBorderType + ":" + parts[3]
                }
            } );
        }

        items.border_none = {
            label: 'Border none',
            group: 'border_general',
            icon: 'border_none',
            order: items.length,
            onClick: function() {
                var curBorderType = plugin.getCurrentBorderType(editor);

                if ( curBorderType ){
                    var att = curBorderType.getAttribute( 'style' );
                    if(att){
                        parts = att.split( ':' );
                        this.style = new CKEDITOR.style( {
                            element: 'td',
                            attributes: {
                                style:  att,
                            }
                        });
                        if ( curBorderType )
                            editor.execCommand( 'border', this);
                    }
                }
            }
        };


        items.border= {
            label: 'border outer',
            group: 'border_general',
            icon: 'border_outer',
            borderType: 'border',
            order: items.length,
            onClick: function() {
                editor.execCommand( 'border', this );
            }
        };

        items.border.style = new CKEDITOR.style( {
            element: 'td',
            attributes: {
                style:  'border: 1px solid black',
            }
        } );

        // Initialize groups for menu.
        editor.addMenuGroup( 'border_outer', 1 );
        editor.addMenuGroup( 'border_general', 2);
        editor.addMenuItems( items );

        editor.ui.add( 'Border',  CKEDITOR.UI_MENUBUTTON, {
            label: 'Rahmenlinie hinzufügen',
            icon: "border_bottom",
            toolbar: 'insert',
            command: 'border',
            allowedContent : 'table tr th td[style]{*} caption;',
            onMenu: function() {
                var activeItems = {}, parts;
                curBorderType = plugin.getCurrentBorderType(editor);
                for ( var prop in items )
                    activeItems[ prop ] = CKEDITOR.TRISTATE_OFF;
                if ( curBorderType ){
                    var att =   curBorderType.getAttribute( 'style' );
                    if(att){
                        parts = att.split( ':' );
                        borderType = parts[0];
                        activeItems[ borderType ] = CKEDITOR.TRISTATE_ON;
                    }
                }
                return activeItems;
            }
        } );
    },

    // Gets the bordertype for the current editor selection.
    // @param {CKEDITOR.editor} editor
    // @returns {CKEDITOR.dom.element} The bordertype element, if any.
    getCurrentBorderType: function( editor ) {
        var elementPath = editor.elementPath(),
            activePath = elementPath && elementPath.elements,
            pathMember, ret;
        // IE8: upon initialization if there is no path elementPath() returns null.
        if ( elementPath ) {
            for ( var i = 0; i < activePath.length; i++ ) {
                pathMember = activePath[ i ];
                if ( !ret && pathMember.getName() == 'td' && pathMember.hasAttribute( 'style' )){
                    ret = pathMember;
                }
            }
        }
        return ret;
    }
} );

/**
*基本示例插件将当前日期和时间插入CKEditor编辑区域。
*/
//在编辑器中注册插件。
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.plugins.html
CKEDITOR.plugins.add（'cellborder'，
{
需要：'菜单按钮'，
图标：“border\u bottom，border\u double\u bottom，border\u left，border\u outer，border\u right，border\u top，border\u none”，
//插件初始化逻辑在这个方法中。
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.pluginDefinition.html#init
init：函数（编辑器）{
var borderouter=（editor.config.borderTypeList | |['border|u bottom:border bottom:border bottom:1px纯黑'，
'边框顶部：边框顶部：边框顶部：1px纯黑'，
'右边框：右边框：右边框：1px纯黑'，
'左边框：左边框：左边框：1px纯黑'，
“边框双底：边框双底：边框底：3px双黑”]，
plugin=这个，
项目={}，
部分，
控制命令类型，
我
//寄存器命令。
editor.addCommand（'border'{
allowedContent:'表tr th td[style]{*}标题；'，
上下文敏感：是的，
exec：函数（编辑器，项）{
如果（项目）
编辑器[item.style.checkActive（editor.elementPath（））？'removeStyle'：'applyStyle']（item.style）；
},
删除：函数（编辑器）{
editor.removeStyle（）；
},
刷新：函数（编辑器、路径）{
if（path.contains（'table'））{
var curStyle=plugin.getCurrentBorderType（编辑器）；
if（curStyle）{
var att=curStyle.getAttribute（'style'）；
如果（附件）{
var parts=att.split（“：”）；
this.setState（parts[0].indexOf（'border'）==0？CKEDITOR.TRISTATE\u打开：CKEDITOR.TRISTATE\u关闭）；
}
其他的
此.setState（CKEDITOR.TRISTATE_关闭）；
}
其他的
此.setState（CKEDITOR.TRISTATE_关闭）；
}
其他的
此.setState（CKEDITOR.TRISTATE_禁用）；
}
} );
//解析BorderConfigString，并为每个边框创建项条目。
对于（i=0；i