[英]CKEditor - Stylesheet Parser - Valid Selectors
I am transitioning my CMS to use CKEditor. 我正在将CMS转换为使用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]
. 使用简单的类声明进行定义:
.[class]
。 By default the selector finds [element].[class]
declarations. 默认情况下,选择器查找
[element].[class]
声明。
I tried setting for stylesheetParser_validSelectors
: 我尝试设置
stylesheetParser_validSelectors
:
config.stylesheetParser_validSelectors = /\.\w+/;
...but the styles selection is empty. ...但是样式选择为空。
I am using Firebug, and I don't see any errors in the console. 我正在使用Firebug,但在控制台中看不到任何错误。
My Solution 我的解决方案
I ended up using the stylesSet
configuration option for two reasons: 由于两个原因,我最终使用了
stylesSet
配置选项:
Code: 码:
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;
Your selectors are blocked by default skipSelectors ( ^\\.
): 默认情况下,您的选择器处于阻塞状态skipSelectors(
^\\.
):
config.stylesheetParser_skipSelectors = /(^body\\.|^\\.)/i
This is because stylesheetparser plugin wasn't designed to deal with such cases. 这是因为stylesheetparser插件并非旨在处理此类情况。 You can, however, override it:
但是,您可以覆盖它:
config.stylesheetParser_skipSelectors: /^body\\./i
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): 现在看一下stylesheedparser插件的代码(也记录
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 }
});
}
Patch it a little bit: 修补一下:
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 }
});
}
And this is it! 就是这样!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.