Question

我合并了stylesheetparser和stylescombo插件，并希望从组合中选择多个类。我在onOpen和onClick函数中做了一些更改：

onOpen: function() {
    var selection = editor.getSelection(),
        selectedElement = selection.getSelectedElement(),
        selectedRanges = !selectedElement && selection.getRanges(),
        selectedText = !selectedElement && selection.getSelectedText(),
        nativeRange,
        elementPath = editor.elementPath(),
        element,
        counter = [ 0, 0, 0, 0 ];

    this.showAll();
    this.unmarkAll();
    for ( var name in styles ) {
        var style = styles[ name ],
            type = style._.type;

        if(type == CKEDITOR.STYLE_OBJECT && (selectedElement || selectedText))
            element = !selectedText ? selectedElement : selectedText;

        else if((type == CKEDITOR.STYLE_BLOCK || type == CKEDITOR.STYLE_INLINE) && !selectedText && !selectedElement && selectedRanges[ 0 ] && selectedRanges[ 0 ].getCommonAncestor( 1 ))
            element = selectedRanges[ 0 ].getCommonAncestor( 1 ).getAscendant( style.element );

        else if(type == CKEDITOR.STYLE_INLINE && selectedText && !selectedElement)
            element = selectedText;

        if(element != null) {
            if(style.checkApplicable( elementPath, editor, editor.activeFilter )) {
                counter[ type ]++;

                var classes = !selectedText ? element.getAttribute( 'class' ) : null,
                    classArr = classes != null ? classes.split(' ') : [];

                if(classArr.length > 0) {
                    for(var i = 0; i < classArr.length; i++) {
                        if(classArr[i] == style._.definition.attributes['class'])
                            this.mark( name );
                    }
                }
            }
            else
                this.hideItem( name );
        }
    }

    if ( !counter[ CKEDITOR.STYLE_BLOCK ] )
        this.hideGroup( lang[ 'panelTitle' + String( CKEDITOR.STYLE_BLOCK ) ] );

    if ( !counter[ CKEDITOR.STYLE_INLINE ] )
        this.hideGroup( lang[ 'panelTitle' + String( CKEDITOR.STYLE_INLINE ) ] );

    if ( !counter[ CKEDITOR.STYLE_OBJECT ] )
        this.hideGroup( lang[ 'panelTitle' + String( CKEDITOR.STYLE_OBJECT ) ] );
},
onClick: function( value ) {
    editor.focus();
    editor.fire( 'saveSnapshot' );

    var style = styles[ value ],
        type = style._.type,
        selection = editor.getSelection(),
        selectedElement = selection.getSelectedElement(),
        selectedRanges = !selectedElement && selection.getRanges(),
        selectedText = !selectedElement && selection.getSelectedText(),
        element;

    if(type == CKEDITOR.STYLE_OBJECT && (selectedElement || selectedText))
        element = !selectedText ? selectedElement : selectedText;

    else if((type == CKEDITOR.STYLE_BLOCK || type == CKEDITOR.STYLE_INLINE) && !selectedText && !selectedElement && selectedRanges[ 0 ] && selectedRanges[ 0 ].getCommonAncestor( 1 )) 
        element = selectedRanges[ 0 ].getCommonAncestor( 1 ).getAscendant( style.element );

    else if(type == CKEDITOR.STYLE_INLINE && selectedText && !selectedElement)
        element = selectedText;

    if(element != null) {
        var classes = !selectedText ? element.getAttribute( 'class' ) : null,
            classArr = classes != null ? classes.split(' ') : [],
            selClass = style._.definition.attributes['class'],
            styleClasses = CKEDITOR.tools.clone( style );

        if(classArr.length > 0 && contains(classArr, selClass) && !selectedText) {
            var newClassArr = new Array();
            for(var i = 0; i < classArr.length; i++) {
                if(classArr[i] != selClass)
                    newClassArr.push(classArr[i]);
            }

            if(newClassArr.length == 0) {
                editor.removeStyle( styleClasses );
            }
            else {
                styleClasses._.definition.attributes['class'] = newClassArr.join(' ');
                editor.applyStyle( styleClasses );
            }
        }
        else {
            classArr.push(selClass);
            styleClasses._.definition.attributes['class'] = classArr.join(' ');
            editor.applyStyle( styleClasses );
        }
    }

    editor.fire( 'saveSnapshot' );
},

它适用于块元素和图像（没有检查假元素），您可以选择和取消选择所需的所有类。但是我对内联元素有些麻烦。

如果我在一个块元素内部单击，它会列出该元素的所有类，我可以选择/取消选择我想要/需要的内容。如果我在内联元素中单击，则不会发生任何事情。 getAscendant（）是否找不到内联元素标签？

如果我选择文本，它会列出内联元素的所有类。但我只想要跨度类而不是例如强大的课程。强标记的类只有在我选择强元素时才可用。可能吗？如何区分不同的内联元素？

为什么锚是对象而不是内联元素？如果我双击一个锚点并关闭链接对话框，我可以选择一个锚类。

如果没有可用的课程，如何禁用组合？我找不到合适的地方。如何在类选择中禁用组合关闭？如果在关闭后设置了所选的类，请忘记这个问题 - 我可以忍受它： - ）

以下是演示：http://webutler.de/test/index.php?lang=en

完整文件：test / plugins / cssclasscombo / plugin.js

插件为zip：test / plugins / cssclasscombo.zip

如果您尝试插件，请设置

config.contentsCss = ['contents.css']; // <= it reads the classes from this file
config.extraPlugins = 'cssclasscombo';
config.removePlugins = 'stylescombo';
config.stylesSet = [];
config.allowedContent = true;
// the plugin works with indent and justify classes =>
config.justifyClasses = [ 'alignleft', 'aligncenter', 'alignright', 'alignjustify' ];
config.indentClasses = [ 'indent1', 'indent2', 'indent3', 'indent4', 'indent5' ];

到您的配置并使用此CSS文件：http://www.webutler.de/test/contents.css

Thanx寻求帮助

Answer 1

它并不完美，但插件现在正常运行。如果您需要，请点击下载：

http://webutler.de/download/ckeditor_plugins/cssclasscombo.zip

config.js中的设置：

config.removePlugins = 'stylescombo';
config.extraPlugins = 'cssclasscombo';
config.stylesSet = [];
config.contentsCss = ['contents.css']; // <= classes are read from this file(s)

具有多个类选择的stylescombo插件

1 个答案: