Javascript 向 CKEditor 添加自定义样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2102797/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding custom styles to CKEditor
提问by Elitmiar
I recently added CKEditor to my app and I would like to include my own CSS stylesheets within the editor so that I can select them within the editor.
我最近将 CKEditor 添加到我的应用程序中，我想在编辑器中包含我自己的 CSS 样式表，以便我可以在编辑器中选择它们。
How do I accomplish this? My code so far looks like this:
我该如何实现？到目前为止，我的代码如下所示：
<script type="text/javascript">
CKEDITOR.replace( 'editor1',{
uiColor : '#9AB8F3',
});
</script>
采纳答案by dove
Please look at @metavida answer for a better answer than this
请查看@metavida 答案以获得比这更好的答案
<script type="text/javascript">
CKEDITOR.replace( 'editor1',{
uiColor : '#9AB8F3',
stylesSet.add('default', [
{ name: 'My Custom Block', element: 'h3', styles: { color: 'Blue'} },
{ name: 'My Custom inline style', element: 'q'}
]);
});
</script>
Though if you're using this in more than one place it'd be best to look at putting this into the stylescombo\styles\default.js file and updating your config.js file accordingly as per api.
但是，如果您在多个地方使用它，最好将其放入 stylecombo\styles\default.js 文件中，并根据 api 相应地更新您的 config.js 文件。
回答by metavida
<script type="text/javascript">
// This code could (may be should) go in your config.js file
CKEDITOR.stylesSet.add('my_custom_style', [
{ name: 'My Custom Block', element: 'h3', styles: { color: 'blue'} },
{ name: 'My Custom Inline', element: 'span', attributes: {'class': 'mine'} }
]);
// This code is for when you start up a CKEditor instance
CKEDITOR.replace( 'editor1',{
uiColor: '#9AB8F3',
stylesSet: 'my_custom_style'
});
</script>
You can also read the full documentation of the stylesSet.addsyntax:
您还可以阅读stylesSet.add语法的完整文档：
回答by surtyaar
This works for me
这对我有用
CKEDITOR.addCss('body{background:blue;}');
回答by Garret Wilson
As has already been mentioned, there is a page explaining how to set up a set of custom styles. What the little gem hidden on that page (and not really clear) is that rather than creating a named set of styles, you can define the styles inline in your configuration, like this:
正如已经提到的，有一个页面解释了如何设置一组自定义样式。该页面上隐藏的小宝石（并不是很清楚）是，您可以在配置中内联定义样式，而不是创建一组命名的样式，如下所示：
stylesSet : [
{
name : 'Green Title',
element : 'h3',
styles :
{
'color' : 'Green'
}
} ],
回答by joshua.paling
The best way is to use this plugin: http://ckeditor.com/addon/stylesheetparser
最好的方法是使用这个插件：http: //ckeditor.com/addon/stylesheetparser
Paste it inside the 'ckeditor/plugins' directory, then include something like this in your 'ckeditor/config.js':
将它粘贴到 'ckeditor/plugins' 目录中，然后在你的 'ckeditor/config.js' 中包含这样的内容：
config.extraPlugins = 'stylesheetparser';
config.contentsCss = '/css/inline-text-styles.css';
config.stylesSet = [];
Where '/css/inline-text-styles.css' is a path to your own css folder in your webroot, outside of ckeditor. That saves you having to mix css with javascript.
其中 '/css/inline-text-styles.css' 是 ckeditor 之外的 webroot 中您自己的 css 文件夹的路径。这使您不必将 css 与 javascript 混合使用。
回答by ZiggyTheHamster
Little late to the party here, but the default styles are in _source/plugins/styles/styles/default.js. You could use that as your style config and add styles and it would effectively be appending.
这里的聚会有点晚了，但默认样式是_source/plugins/styles/styles/default.js. 你可以使用它作为你的样式配置并添加样式，它会有效地附加。
