大家在使用織夢網站建設系統時，在對內容頁面的body正文部分進行編輯的時候，前臺正文部分有的時候需要一個自定義樣式，比如對特定的代碼加個邊框，讓用戶更容易區別及識別......但ckeditor并沒有自定義樣式涉及。而且織夢到了5.7版本之后編輯器不再是之前fck編輯器，而是升級成了ckeditor編輯器。
如果你認為沒有必要那也可以直接在模板中寫一個樣式，調用一個自定義字段來實現，但這個方法，在文章不需要這個字段屬性的時候，在前臺頁面一樣會有這樣一個樣式存在，造成代碼繁冗，不利于優化。而自定義按鈕，在編輯時，我們使用的話，就會出現，而不使用，則在前臺頁面并無任何樣式或代碼，所以自定義按鈕添加自定義屬性是一個完美的方法。
Ckeditor添加自定義按鈕，實現自定義屬性流程
1、首先打開網站根目錄，請在自己空間或服務器上找到/include/ckeditor；
2、打開ckeditor文件夾下的ckeditor.js文件，查找代碼：
1 |
n('Bold',p.bold,'bold',o.coreStyles_bold); |
3 |
n('Custom',p.custom,'custom',o.coreStyles_custom); |
|
注：這里的Custom為自定義，但必須第一個首字母大寫，后面全為小寫。
3、繼續在ckeditor.js中查找i.coreStyles_bold={element:'strong',overrides:'b'};在其后添加代碼：i.coreStyles_custom={element:'custom'};
4、繼續在ckeditor.js中查找i.toolbar_Basic= 可以看到其后面有[['Bold','Italic','-','NumberedList','BulletedList','-','Link','Unlink','-','About']];這里是編輯器的最基礎編輯按鈕，在'Bold',后添加’Custom’, 添加完成后代碼為： [['Bold','Custom','Italic','-','NumberedList','BulletedList','-','Link','Unlink','-','About']];
5、繼續查找代碼：{name:'basicstyles',items:['Bold',在后面同樣加上’Custom’,
添加完成后代碼為：
1 |
{name:'basicstyles',items:['Bold','Custom','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat']} |
|
6、打開http://www.badubox.com/include/ckeditor/ckeditor.inc.php
注：這里為本站目錄，相對目錄為/include/ckeditor/ckeditor.inc.php
這里我們以軟件欄目的編輯器來講，其他同理，軟件欄目編輯器引用的按鈕數組為small,這個可以在dede/templets/soft_add.htm中查詢到：
修改ckeditor.inc.php 中$toolbar['Small'] = 其后面的內容 在array( 'Bold','Italic','Underline','Strike','-'),中添加’Custom’,
7、這時候基本修改完成，清理cookies和歷史記錄后，打開軟件欄目，添加文檔，編輯器樣子如下： 注意：一定要清除cookies和歷史記錄。
8、按鈕出現了，但按鈕還是空白，并沒有一個圖標，下面開始制作圖標。
打開/include/ckeditor/skins注：此處為本站目錄。
這里是織夢的皮膚文件夾，其中只有kama這一個皮膚。打開kama文件夾下的icons.png
最下面添加一個按鈕，
接著打開kama文件夾下的editor.css，查找：
1 |
.cke_skin_kama .cke_button_bold .cke_icon{background-position:0-304px;} |
|
在其后添加樣式：
1 |
.cke_skin_kama .cke_button_custom .cke_icon{background-position:0-1295px;} |
|
現在清理cookies和歷史記錄，進入后臺添加軟件，我們來看使用效果，輸入文字后，點擊源碼按鈕：
OK，織夢ckeditor編輯器添加自定義按鈕，并實現自定義樣式完成。
9、下面測試前臺顯示效果。
在/templets/default/style/page.css中找到.viewbox .content樣式，在這個樣式后面添加樣式：
1 |
.viewbox .content custom{border:1pxdottedred;font-size:20px;} |
|
注：以上是本站路徑，如果你已進行修改，那么請根據自己網站情況查找。樣式根據自身需要填寫，這里只是做測試效果。
