0

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

我尝试设置stylesheetParser_validSelectors：

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

...但样式选择为空。

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

我的解决方案

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

  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;
4

1 回答 1

1

默认情况下，您的选择器被阻止 skipSelectors ( ^\.)：

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

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

config.stylesheetParser_skipSelectors: /^body\./i

您的样式将在列表中可见，但在视觉上会被破坏。现在看stylesheedparser插件的代码（也是logaClasses变量）：

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

就是这样！

编辑：为此问题创建了一张票。

于 2013-01-08T22:34:27.887 回答