使用 javascript 为 CKEditor 文本添加类样式

Question

我正在构建一个独立的网页，并使用CKEditor 4.6.2进行输入。目前，我的最后一个障碍是尝试将css类样式应用于通过javascript插入的文本。我的 css 在头标签中，那里没有什么特别的。我已经按照 CKEditor 文档的指示定义了一个样式集。

CKEDITOR.stylesSet.add('my_custom_styles', [
// Block-level Styles
{ name: 'My Custom Block', element: 'p',
styles:{
'color': 'dimgray',
'padding-left':'15px',
'border-left-style':'solid',
'border-width':'3px',
'border-color':'#52bab3',
'margin-left':'2px',
}
},
{ name: 'MyCustomInline', element: 'span', attributes: {'class': 'redText'}
}
]);

并将其添加到CKEditor中

CKEDITOR.replace('LogBook', {
language: 'en',
uiColor: '#9AB8F3',
toolbar: [
['Undo','Redo','-'],
['Bold','Italic','Underline','Strike','-'],
['RemoveFormat','-'],
['NumberedList','BulletedList','-'],
['HorizontalRule'],
'/',
['Styles','-','Source','-','About','Maximize'],
],
removeButtons: 'Subscript,Superscript,Cut,Copy,Paste,Anchor,Scayt,PasteText,PasteFromWord,Image,SpecialChar,Link,Unlink,Table,Indent,Outdent,Blockquote,Format',
removePlugins: 'wsc,scayt',
stylesSet:'my_custom_styles',
allowedContent: true
})

但是对于我的生活，我无法弄清楚如何使用 javascript 将类应用于编辑器中的元素，就像这样......

<p class="My Custom Block">Some text here</p>

我已经关闭了内容过滤，并有一个插入上述代码的自定义函数，但段落元素没有被设置样式。

我还尝试直接从我的样式表中应用样式，例如：

<p class="redText">Some text here</p>

但同样，段落元素没有被设置样式。

任何帮助都会很棒，谢谢。

Answer 1

经过长时间的搜索，我终于遇到了一个答案(底部的surtyaar(将一个类添加到CKEditor元素中。

CKEDITOR.addCss( '.redText { border-bottom: 1px dotted red }' );

这需要在声明 CKEditor 实例之前调用。

来自 CKEditor 文档。