CKEditor - 样式表解析器 - 有效选择器 [英] CKEditor - Stylesheet Parser - Valid Selectors

问题描述

我正在将CMS转换为使用CKEditor。我目前正试图使用​​样式表解析器。我有大量的网站已经定义了编辑器样式。定义使用简单的类声明：。[class] 。默认情况下，选择器找到 [element]。[class] 声明。

I am transitioning my CMS to use CKEditor. I am currently trying to make use of the Stylesheet Parser. I have a large number of sites with editor styles already defined. The definitions are made with simple class declarations: .[class]. By default the selector finds [element].[class] declarations.

c> stylesheetParser_validSelectors ：

I tried setting for stylesheetParser_validSelectors:

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

...但样式选择为空。

...but the styles selection is empty.

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

I am using Firebug, and I don't see any errors in the console.

我的解决方案

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

I ended up using the stylesSet configuration option for two reasons:

1. 它可以控制为样式选择显示的名称


2. 我可以设置默认值，覆盖

代码：

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;

推荐答案

您的选择器被默认阻塞skipSelectors $ c> ^ \。）：

Your selectors are blocked by default skipSelectors (^\.):

config.stylesheetParser_skipSelectors = /(rsbody\.|^ \。）/ i

这是因为stylesheetparser插件不是为了处理这种情况。但是，您可以覆盖它：

This is because stylesheetparser plugin wasn't designed to deal with such cases. You can, however, override it:

config.stylesheetParser_skipSelectors：/^body\./i

您的样式将在列表中可见，但它将在视觉上损坏。现在看看stylesheedparser插件的代码（也记录 aClasses 变量）：

Your styles will be visible on the list, but it will be visually broken. Now look at the code of stylesheedparser plugin (also log aClasses variable):

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 }
    });
}

就是这样！

编辑：创建门票这个问题。

这篇关于CKEditor - 样式表解析器 - 有效选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！