将自定义样式添加到CKEditor

Question

我最近将CKEditor添加到我的应用程序中,我想在编辑器中包含我自己的CSS样式表,以便我可以在编辑器中选择它们.

我该如何做到这一点？到目前为止,我的代码如下所示:

<script type="text/javascript">

    CKEDITOR.replace( 'editor1',{
        uiColor : '#9AB8F3',
    });

</script>

Answer 1

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

您还可以阅读stylesSet.add语法的完整文档:

• CKEditor 4文档
• 文森特提到的CKEditor 3文档.
• CKEditor 4如何自定义样式下拉列表？
• CKEditor 3如何自定义样式下拉列表？

Answer 2

这适合我

CKEDITOR.addCss('body{background:blue;}');

Answer 3

正如已经提到的,有一个页面解释了如何设置一组自定义样式.隐藏在该页面上的小宝石(并不是很清楚)是,您可以在配置中内联定义样式,而不是创建一组命名样式,如下所示:

    stylesSet : [
    {
        name : 'Green Title',
        element : 'h3',
        styles :
        {
            'color' : 'Green'
        }
    } ],

Answer 4

这里派对的时间不多,但默认样式都在_source/plugins/styles/styles/default.js.您可以将其用作样式配置并添加样式,它实际上会附加.

Answer 5

最好的方法是使用此插件：http : //ckeditor.com/addon/stylesheetparser

将其粘贴到“ ckeditor / plugins”目录中，然后在“ ckeditor / config.js”中包含以下内容：

config.extraPlugins = 'stylesheetparser';
config.contentsCss = '/css/inline-text-styles.css';
config.stylesSet = [];

“ /css/inline-text-styles.css”是指向ckeditor之外的Web根中自己的css文件夹的路径。这省去了将CSS与javascript混合使用的麻烦。

Answer 6

请查看@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>

不过，如果您在多个地方使用它，最好考虑将其放入 stylescombo\styles\default.js 文件中，并根据 api 相应地更新您的 config.js 文件。