ckeditor_學習(2) 功能概覽

這篇文章用來講明 ckeditor 的全部可配置的功能，分爲終端用戶配置和開發者配置

1.終端用戶配置

• 用戶接口 – 設置編輯器的UI和語言
• Editor 尺寸設置 – 設置編輯器的尺寸
• 插入內容 – 添加豐富的插入內容，圖片，代碼，表格，數學公式.
• 文本樣式 – 設置文本樣式.
• 文檔代碼編輯 –編輯文檔的源代碼.
• 能力支持 – 一些可對殘障人士提供幫助的工具.

2.開發者配置

• 編輯器UI – 編輯UI.
• 工具欄 – 自定義工具欄.
• API 接口 – 使用 CKEditor API.
• 輸出控制 – 調整編輯器的輸出經過設置html的格式.
• 工具集 – 額外的工具，是編輯器配置和擴展更簡單.

 

1.1 用戶接口

經過配置config.uiColor (rgb 格式） 的對頭部顏色進行配置。

config.uiColor = #66AB16;

經過配置config.defaultLanguage 對編輯器語言進行設置

config.defaultLanguage = 'de';

1.2 尺寸設置

1.2.1 基礎尺寸設置

config.width = 500;        // 500 pixels high.
config.height = '25em';     // CSS unit (em).

經過對cofnig.height和cofnig.width設置，控制編輯器的寬高。只對經典樣式的編輯器有用，對行內編輯器無效

1.2.2 高度自動增長

添加Auto-grow插件是編輯器高度跟隨文章內容自適應，高度增長了用戶編輯內容是離工具欄的距離就遠了，看具體的項目需求吧。

經過config.extraPlugins 添加autogrow 插件，能夠對autogrow 插件進行自定義配置 

config.extraPlugins = 'autogrow';
config.autoGrow_minHeight = 250;// 設置編輯器最小高度
config.autoGrow_maxHeight = 600;// 設置編輯器最大的高度 在最小和最大高度之間會高度會適應內容高度

其餘參數配置

config.autoGrow_onStartup = true; // 設置爲true 編輯器在建立和內容高度變化的時候更新高度，若是不設置會在編輯器每次得到焦點的時候更新高度出發瀏覽器的重繪增長沒必要要的開銷

config.autoGrow_bottomSpace = 50; // 文本內容距離編輯器底部的距離。

config.removePlugins = 'resize'; // 移除resize插件，設置了autogrow功能，resize功能就能夠不使用，這兩個都是爲了解決高度問題的插件。