为CKEditor添加自定义样式

Question

我最近将CKEditor添加到了我的应用程序中，并且希望在编辑器中包含我自己的CSS样式表，以便我可以在编辑器中选择它们。

我该如何做到这一点？到目前为止我的代码看起来是这样的：

<script type="text/javascript"> 

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

</script> 

Answer 1

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

但如果你在多个地方使用这一点，” d最好把它放到stylescombo \ styles \ default.js文件中，并根据api更新你的config.js文件。

Answer 2

这里晚会不多，但默认款式在_source/plugins/styles/styles/default.js。你可以使用它作为你的风格配置，并添加样式，它会有效地追加。

Answer 3

<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 documentation
• CKEditor 3 documentation，文森特提及。
• CKEditor 4 How Do I Customize the Styles Drop-Down List?
• CKEditor 3 How Do I Customize the Styles Drop-Down List?

Answer 4

正如已经提到的，解释如何建立一套custom styles的页面。什么是小宝石隐藏的页面上（而不是真正清楚）是而不是创建一组命名的样式，可以内嵌在组态中定义的样式，像这样：

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

Answer 5

这对我的作品

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

Answer 6

最好的办法就是使用这个插件：http://ckeditor.com/addon/stylesheetparser

了 '的CKEditor /插件' 目录中贴吧，然后在您的 '的CKEditor/config.js' 是这样的：

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

其中'/css/inline-text-styles.css'是ckeditor之外的webroot中自己的css文件夹的路径。这可以节省你不得不混合与JavaScript的CSS。