將自定義樣式添加到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

最好的方法是使用這個插件： 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'是您的webroot中自己的css文件夾的路徑，在ckeditor之外。 這節省了你不得不將CSS與javascript混合使用。

Answer 5

這里派對的時間_source/plugins/styles/styles/default.js ，但默認樣式在_source/plugins/styles/styles/default.js 。 您可以將其用作樣式配置並添加樣式，它實際上會附加。

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文件。