Question

我正在转换我的CMS以使用CKEditor。我目前正在尝试使用Stylesheet Parser。我有很多已定义编辑器样式的网站。定义使用简单的类声明：.[class]。默认情况下，选择器会找到[element].[class]声明。

我尝试设置stylesheetParser_validSelectors：

config.stylesheetParser_validSelectors = /\.\w+/;

...但样式选择为空。

我正在使用Firebug，我在控制台中看不到任何错误。

我的解决方案

我最终使用stylesSet配置选项有两个原因：

它让我可以控制为样式选择显示的名称
我可以设置默认值，但允许覆盖

代码：

if ((typeof EditorStyleSet === 'undefined')
        || (typeof EditorStyleSet !== 'object')
        || !(EditorStyleSet instanceof Array)) {
    // Allow this variable to be set at the site level
    EditorStyleSet = [
        {name:'Title', element:'span', attributes:{'class':'title'}},
        {name:'Subtitle', element:'span', attributes:{'class':'subTitle'}},
        {name:'Header Text', element:'span', attributes:{'class':'headerText'}},
        {name:'Red', element:'span', attributes:{'class':'red'}},
        {name:'Small', element:'span', attributes:{'class':'small'}},
        {name:'Hi-Lite', element:'span', attributes:{'class':'hi-lite'}}
    ];
}
config.stylesSet = EditorStyleSet;

Answer 1

您的选择器被默认的skipSelectors（^\.）阻止：

config.stylesheetParser_skipSelectors = /(^body\.|^\.)/i

这是因为stylesheetparser插件并不是为处理这种情况而设计的。但是，您可以覆盖它：

config.stylesheetParser_skipSelectors: /^body\./i

您的样式将在列表中显示，但它会在视觉上被破坏。现在看一下stylesheedparser插件的代码（也是log aClasses变量）：

for ( i = 0; i < aClasses.length; i++ ) {
    var oElement = aClasses[ i ].split( '.' ),
        element = oElement[ 0 ].toLowerCase(),
        sClassName = oElement[ 1 ];

    styles.push({
        name: element + '.' + sClassName,
        element: element,
        attributes: { 'class': sClassName }
    });
}

稍微修补一下：

for ( i = 0; i < aClasses.length; i++ ) {
    var oElement = aClasses[ i ].split( '.' ),
        element, sClassName;

    if ( !oElement.length ) {
        element = '',
        sClassName = oElement;
    } else {
        element = oElement[ 0 ].toLowerCase(),
        sClassName = oElement[ 1 ];
    }

    styles.push({
        name: element + '.' + sClassName,
        element: !element.length ? 'span' : element,
        attributes: { 'class': sClassName }
    });
}

就是这样！

修改：为此问题创建了a ticket。

CKEditor - 样式表分析器 - 有效选择器

1 个答案: