一些可能會在 CKEditor 會用到的自訂功能:
1. 包括新增字體 (要該 OS 底下擁有這個字體, 因為只是 apply css font-family)2. 從 word 貼上保留各種樣式
3. 調整字體可以選擇的大小與單位
4. html tag 的黑名單與白名單
(若為 4.4 版直接使用 disallowedContent 即可, 不須從 allowedContent 砍掉)
5. Enter 換行的模式 p, br, div
5. Enter 換行的模式 p, br, div
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| CKEDITOR.editorConfig = function ( config ) { | |
| // 自訂字體清單 | |
| config.font_names = CKEDITOR.config.font_names + ';細明體;新細明體;微軟正黑體;標楷體;'; | |
| // 讓 word 可以貼上字體顏色表格樣式等 | |
| config.pasteFromWordRemoveFontStyles = false; | |
| config.pasteFromWordRemoveStyles = false; | |
| // html tag 黑名單 (這是 CKEDITOR 4.4 的功能, 現行 4.3 用 dtd 的方法替代) | |
| config.disallowedContent = 'script style embed iframe frame frameset applet video audio source param'; | |
| // 用 jQuery 將 CKEDITOR.dtd clone 出來, 否則直接 delete 會造成其他元件錯誤 | |
| config.custom_dtd = jQuery.extend(true, {}, CKEDITOR.dtd); | |
| jQuery.each(config.disallowedContent.split(' '), function(i, v) { | |
| delete config.custom_dtd[v]; | |
| }); | |
| // html tag 白名單: 所有定義在 dtd 中的元素 | |
| config.allowedContent = { | |
| $1: { | |
| elements: config.custom_dtd, // 若更新成 4.4 要換成 CKEDITOR.dtd | |
| attributes: true, | |
| styles: true, | |
| classes: true | |
| } | |
| }; | |
| // 自定義字體大小與單位 | |
| var fontSizeUnit = 'pt'; // 預設單位是 px | |
| var sizes = [8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72]; | |
| jQuery.each(sizes, function(i, v) { | |
| sizes[i] = v + '/' + v + fontSizeUnit; | |
| }); | |
| config.fontSize_sizes = sizes.join(';'); | |
| // enter 和 shift+enter 換行功能互換 | |
| config.enterMode = CKEDITOR.ENTER_BR; | |
| config.shiftEnterMode = CKEDITOR.ENTER_P; | |
| }; |
幾乎都要回去看一下文件
REF: [CKEditor 4 Documentation](http://docs.ckeditor.com/#!/guide)
