CKEditor 新增自定義外掛
阿新 • • 發佈：2019-02-09
CKEditor是個強大的編輯器，在很多專案中都是用這個編輯器讓user編輯頁面。因為介面十分類似Word，所以一般人都能輕易上手。只是最好還是要有Html的底子，不然有時候要排版也是會有困難。
網路上已經有不少人實做出來，只是我這人很愛自己做輪子，想說趁這個機會學起來，以後如果真的要客製化功能，也許用的到!基本的CKeditor的安裝跟使用還有跟CKFinder整合我就不多說啦。直接進入正題，自定義一個ToolBar按鈕。將CKEditor下載回來解壓縮丟到網站目錄中，在ckeditor資料夾下可以看到一個"config.js"檔，這檔案是拿來做一些設定用的先貼上我的：
CKEDITOR.editorConfig = function (config) {
config.uiColor = '#AADC6E';
config.contentsCss = ['/Content/layout.css', '/Content/html.css'];
config.toolbar_Full =
[
['Source','-','Save','NewPage','Preview','-','Templates'],
['Undo', 'Redo', '-', 'SelectAll', 'RemoveFormat'],
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
['Maximize', 'ShowBlocks','-','About'],
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],
['Code']
];
config.extraPlugins = 'CodePlugin';
};
|
前幾行的設定都是一般的設定，uiColor是ckeditor的框框顏色，contentsCss是可以將css檔載入，在編輯時就可以看到套用css後的效果。toolbar_Full是設定所要的功能，因為有很多我都用不到，所以就剩下上面所列的這些，注意最後一個['Code']，這不是內建的功能，這是我待會要擴充的功能，因此先放到toolbar中。最後一行也是比較重要的就是 config.extraPlugins
= 'CodePlugin';
CodePlugin就是等等我們擴充的功能名稱(可自定義)。
接著在ckeditor/plugins底下新增一個同上面那個名稱的資料夾，並在裡面加入一個plugin.js檔，如下圖所示：
接著就在plugin.js檔內加入下面的code：
CKEDITOR.plugins.add('CodePlugin',
{
init: function (editor) {
// Add the link and unlink buttons.
editor.addCommand('CodePlugin', new CKEDITOR.dialogCommand('CodePlugin')); //定義dialog，也就是下面的code
editor.ui.addButton('Code', //定義button的名稱及圖片,以及按下後彈出的dialog
{ //這裡將button名字取叫'Code'，因此剛剛上方的toolbar也是加入名為Code的按鈕
label: '插入高亮程式碼',
icon: '',
command: 'CodePlugin'
});
//CKEDITOR.dialog.add( 'link’, this.path + 'dialogs/link.js’ );
//dialog也可用抽離出去變一個js，不過這裡我直接寫在下面
CKEDITOR.dialog.add('CodePlugin', function (editor)
{
//以下開始定義dialog的屬性及事件
return { //定義簡單的title及寬高
title: '插入程式碼',
minWidth: 500,
minHeight: 400,
contents: [
{
id: 'code',
label: 'code',
title: 'code',
elements: //elements是定義dialog內部的元件，除了下面用到的select跟textarea之外
[ //還有像radio或是file之類的可以選擇
{
type: 'select',
label: 'Language',
id: 'language',
//required: true,
'default': 'csharp',
items: [['C#', 'csharp'],
['CSS','css'], ['Html', 'xhtml'],
['JavaScript', 'js'], ['SQL', 'sql'],
['XML', 'xml']]
}
, {
id: 'codecontent',
type: 'textarea',
label: '請輸入程式碼',
style: 'width:700px;height:500px',
rows: 30,
'default': ''
}
]
}
],
onOk: function () { //當按下ok鈕時,將上方定義的元件值取出來，利用insertHtml
code = this.getValueOf('code', 'codecontent');
//將組好的字串插入ckeditor的內容中
lang = this.getValueOf('code', 'language');
editor.insertHtml("<pre class=\"brush:" + lang + ";\">" +
code + "</pre>");
}
};
});
}
})
|
基本上這樣就好了。其實不難，只是有點繁瑣而已。先來看看結果：
按下確定之後，就會生出我們設定的Tag來，其餘的東西，就是要記得載入高亮語法的套件囉。
注意事項：在editor.css 中新增自定義外掛的icon，例如.cke_button__code_icon {background: url(icons.png?t=20af917) no-repeat 0 -960px !important;}；