爲CKEditor添加自定義樣式

我最近將CKEditor添加到了我的應用程序中，並且希望在編輯器中包含我自己的CSS樣式表，以便我可以在編輯器中選擇它們。爲CKEditor添加自定義樣式

我該如何做到這一點？到目前爲止我的代碼看起來是這樣的：

<script type="text/javascript"> 

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

</script>

來源

2010-01-20 Roland

您可以很容易地將自定義樣式添加到編輯器。 [本頁]（http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Styles）顯示瞭如何。 – 2010-01-20 16:15:22

-8

請看@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文件。

來源

2010-03-29 14:51:35 dove

但這甚至不是有效的JS！ – 2011-06-09 12:16:33

@Matti什麼不是特別的？ – dove 2011-06-16 12:40:00

坐在對象文字中間的方法調用無效。 – 2011-06-16 13:37:40

這裏晚會不多，但默認款式在_source/plugins/styles/styles/default.js。你可以使用它作爲你的風格配置，並添加樣式，它會有效地追加。

來源

2011-01-24 20:14:03 ZiggyTheHamster

<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語法的完整文檔：

來源

2011-06-23 23:35:23 metavida

hey op - 選擇此答案。 – Bosworth99 2013-05-16 21:57:52

最好的方法是使用這個：http://ckeditor.com/addon/stylesheetparser在下面看到我的答案。 – 2014-03-05 04:08:43

我不同意，這樣@joshua。你需要通過css文件中的每個選擇器，這意味着爲此創建一個專用文件。 – 2014-10-13 21:11:53

正如已經提到的，解釋如何建立一套custom styles的頁面。什麼是小寶石隱藏的頁面上（而不是真正清楚）是而不是創建一組命名的樣式，可以內嵌在組態中定義的樣式，像這樣：

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

來源

2012-02-22 17:11:53

這對我的作品

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

來源

2013-07-24 20:43:18 surtyaar

正是我在尋找的感謝。 – 2015-03-04 11:16:37

在創建編輯器實例（來自[documentation]（http://docs.ckeditor.com/#!/api/CKEDITOR-method-addCss））之前，應該調用該函數**。 – Webars 2016-01-16 11:31:14

最好的辦法就是使用這個插件：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。

來源

2014-03-05 04:07:34

這似乎可能會有所幫助，但你說「你自己的css文件夾」，然後顯示一個文件的路徑。路徑取決於ckeditor本身的位置，還是始終來自root？我無法得到它的工作，我認爲這是道路。 – bcsteeve 2015-11-06 19:40:53

爲CKEditor添加自定義樣式

回答

相關問題