一、CKEditor4安裝
安裝CKEditor 是很容易的。選擇合適的過程（新安裝或升級），按下面描述的步驟安裝。
1、新安裝
第一次安裝CKEditor，按如下方式進行：
1) 從CKEditor 網站：http://ckeditor.com/download下載最新版本的CKEditor 。
2) 將下載的文檔解壓到你的website根目錄下的ckeditor 目錄中。你可以將文檔放在你的website的任意路徑中。ckeditor 目錄是缺省目錄。
2、升級
要升級現有的CKEditor 安裝，按如下方式進行：
1) 將你的舊編輯文件夾更名為備份文件夾，如ckeditor_old。
2) 從CKEditor 網站：http://ckeditor.com/download下載最新版本的CKEditor 。
3) 將下載的文檔解壓到原編輯器的目錄，如ckeditor。
4) 將你已做過更改的配置文件從備份目錄復制到其新目錄的相應位置。這些配置文件
可能包括（但不限于）下列文件：
oconfig.js ,
contents.css ,
styles.js
3、驗證安裝
CKEditor 帶有樣例頁面，可以用于驗證安裝是否正常。為了查看編輯器是否工作，看一下樣例目錄。
要檢查安裝，在你的站點中調用下面的頁面：
http://<your site>/<CKEditor installation path>/samples/index.html
例如：http://www.example.com/ckeditor/samples/index.html
二、集成
1、加載CKEditor
CKEditor 是JavaScript應用程序。要加載它，需要在頁面中包含一個簡單的文件引用。如果已在站點根目錄下的ckeditor目錄中安裝了CKEditor ，你需要將下面的代碼片段插入到頁面的<head>部分：
<head> ...<script src="/ckeditor/ckeditor.js"></script></head>
當上述文件加載后，就可以使用CKEditor JavaScript API。
當將CKEditor加入到web頁面時，使用原始的文件名（ckeditor.js）。如果想使用不同的文件名，或者甚至想將CKEditor合并到另外一個JavaScript文件中，請先參考開發人員指南中的 Specifying the Editor Path部分。
生成編輯器
現在已經可以在頁面中使用 CKEditor JavaScript API了，可以使用它生成編輯器。為此，有兩種可用的選項：
1、框架式編輯（Framed Editing）
最常用的使用方式，通常的表現形式是在頁面中指定 位置放置工具欄和編輯區。
2、內聯式編輯（Inline Editing）
用于看起來像最終的頁面中。通過HTML5的contenteditable（內容可編輯的）屬性，可以將編輯直接應用于HTML元素上。 點擊你偏愛的選項獲得更多信息。
3、框架式編輯（Framed Editing）
框架式編輯是使用 CKEditor最常用的方式。它通常的表現形式是在頁面中指定位置放置工具欄和編輯區。
在加載 CKEditor的腳本后，就可以準備生成編輯器了。
2、生成框架式編輯式
在框架式編輯時，CKEditor 的工作就像頁面中的文本域元素。編輯器提供了用戶界面，可以容易在編寫、格式化，并可與富文本一起處理，但是可以用<textarea>元素完成同樣的事情（盡管不是那么容易），需要用戶在其中輸入HTML代碼。
實際上，CKEditor 使用文本域將其數據傳給服務器。對于終端用來來說，文本域是不可見的。為了生成編輯器的實例，必須首先將<textarea>元素加入到HTML頁面的源代碼中。
<textarea name="editor1"><p>Initial value.</p></textarea>
注意如果你想將數據加載到編輯器中，如從數據中，你需要將數據置入<textarea>元素中，就像上面例子中HTML編碼的<p>元素一樣。
在此例中，文本域被命名為editor1。在后面當收到提交的數據后，可以將此名字用于服務器端的代碼中
插入文本域后，就可以使用CKEditor JavaScript API將HTML元素替換為編輯器的實例。為此，需要調用簡單的CKEDITOR.replace方法：
<script>CKEDITOR.replace( 'editor1' );</script>
此腳本塊必須被包含在<textarea>標記后的頁面源代碼的任意位置。
你也可以在<head>部分調用replace函數，但此時需要監聽window.onload事件：
<script>window.onload = function() {CKEDITOR.replace( 'editor1' ); };</script>保存編輯器的數據
如上所述，編輯器的工作方式類似于<textarea>域。這意味著當提交包含編輯器實例的表單時，數據將很簡單地提交，使用<textarea>元素名作為鍵來檢查它。
例如，接著上面的例子，我們可以生成下面的PHP代碼：
<?php $editor_data = $_POST[ 'editor1' ];?>
客戶端數據處理
一些應用程序（如基于Ajax的）需要在客戶端處理所有的數據，用其特定的方法將數據發給服務器。如果是這樣，使用CKEditor JavaScript API就足以很容易地檢索編輯器實例的數據。為此，你可以使用getData方法：
<script>var editor_data = CKEDITOR.instances.editor1.getData();</script>
完整的樣例
要插入一個CKEditor實例，可以使用下面的樣例來生成一個頁面，它包含一個用CKEditor替換過的表單。
<html> <head> <title>CKEditor Sample</title> <script src="/ckeditor/ckeditor.js"></script> </head> <body> <form method="post"> <p> My Editor:<br> <textarea name="editor1"><p>Initial value.</p></textarea> <script> CKEDITOR.replace( 'editor1' ); </script> </p> <p> <input type="submit"> </p> </form> </body> </html>
3、內聯式編輯（Inline Editing）
內聯式編輯是一種新技術，使得可以編輯看起來像最終樣子的頁面。它是一種完全的“所見即所得”（WYSIWYG ）體驗，因為不僅是編輯的內容看起來像最終樣子，而且內容所在的頁面和上下文也是這樣。
啟用內聯式編輯
通過HTML5的contenteditable（內容可編輯的）屬性，內聯式編輯可以直接在HTML元素上啟用。
例如，假設你想使用一個<div>元素可編輯。可以這樣做：
<div id="editable" contenteditable="true"> <h1>Inline Editing in Action!</h1> <p>The div element that holds this text is now editable. </div>
也可以通過代碼來啟用編輯，通過調用CKEDITOR.inline：
<div id="editable" contenteditable="true"> <h1>Inline Editing in Action!</h1> <p>The div element that holds this text is now editable.</p></div> <script> // Turn off automatic editor creation first. CKEDITOR.disableAutoInline = true; CKEDITOR.inline( 'editable' ); </script>
當在上面的<div>內容中點擊時，CKEditor的工具欄就是出現。
檢索編輯器的數據
跟框架式編輯不同，當使用內聯式編輯時，用CKEditor編輯的數據沒有放在<textarea>中，而是直接存在于頁面的DOM中。因此，應用程序就要完成檢查數據和存儲所需的操作。
要檢查編輯器的數據，簡單地調用編輯器實例的CKEDITOR.editor.getData方法。對于上面的例子，如下：
<script> var data = CKEDITOR.instances.editable.getData(); // Your code to save "data", usually though Ajax. </script>
注意為了檢索編輯器實例，最初的<div> id已傳給了CKEDITOR.instances對象。
三、配置
1、設置CKEditor 的配置
CKEditor 具有豐富的一組配置選項，可以定制其外觀、功能和行為。主配置文件名字為config.js。此文件可以在CKEditor 安裝文件夾的根目錄中找到。
可用的配置選項
在API文檔中可以找到所有可用的配置選項。參考CKEDITOR.config對象的定義。
在頁面中（In-Page）定義配置
設置 CKEditor的最好方法是當生成了編輯器實例時，在頁面中設置。此方法可以使你避免修改 CKEditor安裝文件夾中最初發布的文件，使升級任務更容易。
在頁面中可將設置傳給任意編輯器實例生成函數，即CKEDITOR.replace 和CKEDITOR.appendTo。例如：
CKEDITOR.replace( 'editor1', { toolbar : 'Basic', uiColor : '#9AB8F3'}); 注意通過一個字面對象定義（以“｛”符號開始，以“｝”符號結束）來傳遞配置選項。因此，每個選項的正確語法是（"配置的名字"）:（"配置的值"）。一定不要在冒號字符（:）處使用“等于”字符（=）。
使用config.js文件
也可以通過使用config.js文件來配置CKEditor的設置。此文件缺省情況幾乎為空。要改變CKEditor的配置，將你想要修改的設置增加到config.js文件中。例如：
CKEDITOR.editorConfig = function( config ) { config.language = 'fr'; config.uiColor = '#AADC6E';}; 為了應用配置設置，必須總是要定義CKEDITOR.editorConfig函數。config.js文件將在頁面范圍中被執行，故你還可以引用在頁面（In-Page）或者甚至是其它JavaScript文件中定義的變量。
使用定制的配置文件
使用定制的配置文件是另一種推薦的設置CKEditor配置的方法。不使用缺省的config.js文件，你可以將此文件復制到站點的任何地方，并簡單地引導編輯器加載它。此方法的優點是采用此方法可以避免改變原始的文件，從而使以后升級CKEditor更容易，只是簡單地覆蓋所有的文件。
假設你將config.js文件復制到你的站點根目錄下一個叫custom的文件夾中。你還將此文件更名為ckeditor_config.js。此時，要使用定義在文件中的定制設置，只需在生成編輯器實例時，設置customConfig配置選項即可。例如：
CKEDITOR.replace( 'editor1', { customConfig : '/custom/ckeditor_config.js'}); 定制的配置文件必須看起來像缺省的config.js文件。
配置的加載順序
不要求你僅使用一種上述配置選項。可以混用上述方法，并且可以正確地加載配置。下面的列表表示在生成編輯器實例時所使用的配置加載順序：
生成一個編輯器的實例。此時，其所有配置項設置為缺少值。
如果在頁面中（in-page）中有配置設置，該文件被加載，否則加載缺省的config.js文件。在定制配置文件中的所有設置覆蓋當前實例的配置。
如果在第二步加載的設置中還定義了新的customConfig值，就加載另一個配置文件，且其設置覆蓋實例的當前設置。對所有文件遞歸，直到沒有再定義customConfig。
最終，在頁面中(in-page)中定義的設置覆蓋實例的當前設置（除了customConfig，它已在第一步中使用過了）。
避免加載外部的設置文件
也可能完全避免加載外部的配置文件，以減少加載的文件數。為此，你需要將
CKEDITOR.config.customConfig設置為空字符串。例如：
CKEDITOR.replace( 'editor1', { customConfig : ' ' }); 如果你在config.js文件中沒有配置，也沒有定制的配置文件，則一定推薦此設置。
2、工具欄的定制
雖然CKEditor是一個功能齊全的“所見即所得”編輯器，但是并不是其所有選項在所有情況下都需要。因此，工具欄定制是最常用需求之一。
有兩種方法配置工具欄來匹配需求：
工具欄組配置
“逐項”配置
工具欄組配置
CKEditor 4為組織工具欄引入了新概念，它基于“分組”，而不是傳統的“逐項定位”方式。
配置分組是由toolbarGroups設置定義的。下面是CKEditor標準發布所使用的配置：
config.toolbarGroups = [ { name: 'clipboard', groups: [ 'clipboard', 'undo' ] }, { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] }, { name: 'links' }, { name: 'insert' }, { name: 'forms' }, { name: 'tools' }, { name: 'document', groups: [ 'mode', 'document', 'doctools' ] }, { name: 'others' }, '/', { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] }, { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align' ] }, { name: 'styles' }, { name: 'colors' }, { name: 'about' }];它是一個對象的列表（數組），每一項有一個“name”（如"clipboard"或"links"）和一個可選的“子組”列表。
改變組的順序
可以通過改變上述配置，可以容易地定制組的順序和位置。
通過加入'/'，正如在上面看到的，可以在工具欄中強制斷行（row-break）。
注意：在上面的配置中，有沒有使用的組。這是因為“設計”的原因（參見“組配置的好處”）。
組配置的好處
與“逐項”配置相比，配置工具欄分組的最重要好處是：自動化。
現在可以讓插件開發人員決定其插件應該將按鈕加到工具欄的哪個組中。例如，“圖像”插件，可將其按鈕包括到“插入”組中，而撤銷和重做按鈕加到“撤銷”子組中。
雖然不是強制性的，但推薦要配置所有的組和子組（包括沒有使用的），因為在將來的任何時候，當安裝了新的插件時，其按鈕將會自動出現在工具欄中，而不用再配置。
組配置的缺點
分組配置的最明顯問題是不可能精確控制每項在工具欄中的放置位置。它是由插件自身來決定的。
“逐項”配置
除了分組配置，還可以通過確定精確的位置來控制工具欄中的每一個單獨的元素。這是通過配置“工具欄定義”來完成的。
工具欄定義是一個JavaScript數組，它含有在編輯器中可以使用的在所有工具欄行中顯示的元素。下面是一個例子：
config.toolbar = [ { name: 'document', items: [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ] }, { name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] }, '/', { name: 'basicstyles', items: [ 'Bold', 'Italic' ] } ]; 這里每個工具欄組都給定了一個名字，并定義了其中項目的精確清單。 也可以用簡單的語法實現上面的（參見后面的“訪問問題”）：
config.toolbar = [ [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ], [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ], '/', [ 'Bold', 'Italic' ]];
通過將'-'(短線)加到項目列表中，將項目分隔符包括其中，如上面看到的。
將'/'加到組之間，可以在工具欄中強制斷行。它們可以用于在其放置的位置強制斷行，使得下一個工具欄組處于新的一行。
“逐項”配置的好處
這種配置最明顯的好處是每個單獨的項目在工具欄中的位置都可以控制。
“逐項”配置的缺點
最大的問題是當安裝新的插件時沒有了自動化。這意味著，如果有任何新的插件加入到你的編輯器中，你將不得不手動改變你的配置，將插件按鈕包含于希望的位置。
可訪問性問題
用于每個工具欄組的名字將被幫助技術所使用，如屏幕閱讀器（screen readers）。該名字將被CKEditor 用于在編輯器語言文件（工具欄組條目）中查找每個工具欄組的“可讀”名字。
屏幕閱讀器將通過使用其可讀名字（如果可用）或其已定義的名字屬性顯示每個工具欄組。
3、樣式
樣式組合（Stryles Combo）插件將一個組合加入到CKEditor 的工具欄中，包含一個樣式列表。此列表使很容易地將定制的樣式和語義值應用于在編輯器中生成的內容上。
可以很容易地定制組合下拉列表中可用的條目，以滿足你的需要。
定義樣式
樣式定義是一個JavaScript數組，通過調用CKEDITOR.stylesSet.add函數注冊。必須給樣式定義賦以唯一的名字，這樣后面就可以配置每個編輯器實例來加載它。這種方法可以使一個樣式定義被頁面中多個CKEditor實例共享。
下面的代碼展示了如何注冊一個例子樣式定義。
CKEDITOR.stylesSet.add( 'my_styles', [ // Block-level styles { name: 'Blue Title', element: 'h2', styles: { 'color': 'Blue' } }, { name: 'Red Title' , element: 'h3', styles: { 'color': 'Red' } }, // Inline styles { name: 'CSS Style', element: 'span', attributes: { 'class': 'my_style' } }, { name: 'Marker: Yellow', element: 'span', styles: { 'background-color': 'Yellow' } }]); 如上面所示的樣式定義注冊可以內置于頁面源代碼中，或者存在于外部文件中，只要需要時，“按需”加載。（見下面）。
當準備好定義后，你必須通過使用stylesSet設置使編輯器應用新注冊的樣式。這可以在config.js文件中設置，例如：
config.stylesSet = 'my_styles';
使用外部樣式定義文件
可以將樣式定義的注冊調用包含在一個外部JavaScript文件中。缺省情況，CKEditor從其安裝文件夾中的styles.js文件中加載樣式定義。
你的樣式定義文件可以保存在站點的任意地方（或互聯網的某個地方）。但，你必須知道訪問它所需的URL。例如，你可以將此文件保存在站點的根目錄中，然后按/styles.js調用它，或者放在其它任意地方，并使用其完整的URL引用它，如http://www.example.com/styles.js。
此時，改變stylesSet設置，使編輯器指向此文件：
config.stylesSet = 'my_styles:/styles.js';//或者config.stylesSet = 'my_styles:http://www.example.com/styles.js';
樣式定義設置的語法總是：樣式定義名稱:文件的URL。
注意，必須使用在此文件中注冊樣式定義時使用過的唯一的名稱。
樣式規則
在樣式定義中的輸入項稱為“樣式規則”。每條規則定義了單個樣式的顯示名字和元素、屬性以及所使用的CSS樣式。下面是它的一般表現形式：
{ name: 'Name displayed in the Styles drop-down list', element: 'HTML element name (for example "span")', styles: { 'css-style1': 'desired value', 'css-style2': 'desired value', ... } attributes: { 'attribute-name1': 'desired value', 'attribute-name2': 'desired value', ... } }名稱和元素值是必須的，而其它的值是可選的。
樣式的類型
有三種樣式類型，每一種都與在樣式規則中使用的元素相關:
塊級樣式（Block-level styles）-作為整體應用于文本塊（段落），不限于文本選擇。應用于下面的元素：address, div, h1, h2, h3, h4, h5, h6, p, 和 pre。
對象樣式（Object styles）- 用于特殊的可選擇的對象（不是文本的），不論何時只要你的瀏覽器支持這樣的選擇。應用于下面的元素：a, embed, hr, img, li, object, ol, table, td, tr 和 ul。
內聯樣式（Inline styles ）- 應用于文本選擇，其樣式規則所使用的元素沒有在其它樣式類型中定義。
樣式單解析器插件（Stylesheet Parser Plugin）
存在另一種簡化的方法，用于定制在CKEditor中生成文檔的樣式，用外部CSS樣式單文件中添加的樣式定義來填充下拉清單。
樣式單解析器插件允許使用現有的CSS樣式，而不必按上面給出的格式專門為CKEditor定義樣式。
安裝完樣式單解析器后，需要使用 contentsCss配置設置，提供含有樣式定義的CSS文件的位置：
最后，如果你想跳過加載CKEditor 缺省使用的樣式，可以將stylesSet設置為空值：
config.contentsCss = 'sample_CSS_file.css';
這種解決方法使得可以配置編輯器使用現有的CSS樣式單規則，而不需要為CKEditor生成單獨的樣式定義。另一方面，前面使用的方法提供了對用戶可以使用樣式的更多控制，因此，兩種方法可以按需要互換使用。
選擇CSS選擇器
可以細調此插件，以使只考慮與stylesheetParser_validSelectors配置值相匹配的CSS選擇器。默認的正則表達式接受 element.class形式的所有CSS規則，但可以修改它，以引用有限的元素集，如下面的例子：
// Only add rules for <p> and <span> elements.（僅為<p>和<span>元素增加規則 config.stylesheetParser_validSelectors = //^(p|span)/./w+/;
限制CSS選擇器
通過設置stylesheetParser_skipSelectors的配置值，也可以進行定制。那么，該插件將會角力忽略與正則表達式相匹配的CSS規則，不會在下拉列表中顯示它們，也不會使用它們輸出文檔內容。默認值不包括為<body>的所有元素和為非具體元素定義的類，但可以修改它，以忽略更廣泛的元素集，如下例：
// Ignore rules for <body> and <caption> elements, classes starting with "high", and any class defined for no specific element.（忽略<body>和<caption>元素、以“high”開頭的類，以及為非具體元素定義的類的規則）config.stylesheetParser_skipSelectors = /(^body/.|^caption/.|/.high|^/.)/i;
4、高級內容過濾器
介紹
注意：高級內容過濾器是在CKEditor 4.1中引入的。
什么是高級內容過濾器（ACF）？
ACF是自CKEditor 4.1可用的高度可配置的CKEditor核心特色功能。它限制和適配輸入的數據（在源代碼模式中或由editor.setData方法添加的HTML代碼，粘貼的HTML代碼，等等），因此它可以以更可行的方式配置編輯器的配置。它也可以使生成配置不允許的HTML代碼的功能無效。
高級內容過濾器有兩種工作模式：
1、自動模式-過慮器由編輯器功能（如插件，按鈕和命令）進行配置，這些功能是由配
置選項，如CKEDITOR.config.plugins、 CKEDITOR.config.extraPlugins和 CKEDITOR.config.toolbar，來啟用的。
2、 定制模式-由CKEDITOR.config.allowedContent選項來配置過濾器，并且只有與此設置匹配的功能才被激活。
在兩種模式中，可以通過使用CKEDITOR.config.extraAllowedContent設置來擴展過濾器的配置。
如果想使高級內容過濾器不起作用，將CKEDITOR.config.allowedContent設置為"true"。所有可用的編輯器功能將被激活，并且將不會過濾輸入的數據。
自動模式
當沒有提供CKEDITOR.config.allowedContent設置時，高級內容過濾器工作于自動模式。在編輯器初始化時，編輯功能將其規則添加到過濾器。因此，只允許使用當前加載的功能可以編輯的內容，其余所有內容都被過濾掉。
下面的例子或許可以較容易地理解ACF的自動模式。
1. 從完全或標準CKEditor包中打開datafiltering.html例子（基本包提供的功能集太有限了）。
2. 勾選editor 1。它使用默認的配置，所以所有包中可用的按鈕、按鍵或樣式都是有效
的，并且編輯器的內容也與最初加載的內容一樣（除了標準包中的很小細節--因為標準包不包括 Justify（調整版面）插件，頁腳沒有向右對齊）。
3. 現在勾選editor 4。你可以看到很多插件和按鈕被CKEDITOR.config.removePlugins和 CKEDITOR.config.removeButtons移除了；CKEDITOR.config.format_tags列表也被縮減了。配置的改變自動反映在了編輯器的內容中了--Image工具欄按鈕沒有了，故在內容中也就不存在圖像了；Table插件沒有了，故添加在原始內容中的表格也被移除了。你可以在源代碼模式中看一下編輯器是如何清除粘貼的內容或HTML代碼。
如果想將編輯器配置為工作于自動模式，但需要附加的HTML標記、屬性、樣式或類生效，可以使用CKEDITOR.config.extraAllowedContent配置選項。
定制模式
當定義了CKEDITOR.config.allowedContent設置后，高級內容過濾器就工作于定制模式。此配置選項告訴過濾器允許哪些HTML元素、屬性、樣式和類。基于默認的規則（稱為允許內容規則--Allowed Content Rules），編輯器過濾輸入的數據，決定哪些功能生效。
允許內容規則（Allowed Content Rules）可以被設置為兩種不同的格式：緊湊的字符串格式（string format）和更強大的對象格式（object format）。關于允許內容規則，請閱讀允許內容規則。
下面的例子可以使較容易地理解ACF的定制模式。
1. 從完全或標準CKEditor包中打開datafiltering.html例子（基本包提供的功能集太有限了）。
2. 勾選editor 1。它使用默認的配置，所以所有包中可用的按鈕、按鍵或樣式都是有效的，并且編輯器的內容也與最初加載的內容一樣（除了標準包中的很小細節--因為標準包不包括 Justify（調整版面）插件，頁腳沒有向右對齊）。
3. 勾選editor 2。CKEDITOR.config.allowedContent選項定義了允許內容規則使用字符串格式。注意到，因為這些規則不允許's'元素，刪去（Strike Through）按鈕從工具欄中被刪除了，并且文本中的刪去格式化也被刪除了。對于帶有水平（Horizontal Line）、下標（Subscript）和上標（Superscript）功能的例子同樣如此。
再看一下Styles和Format下拉列表，僅含有允許內容規則中定義的項目。而且，在某些對話框中可用的選項也受到了限制。例如，圖象對話窗口僅含有URL、替代文字（Alternative Text）、寬度和高度值，因為僅有這些屬性在CKEDITOR.config.allowedContent中定義了。
4. 另外，editor 3 被配置為使用對象格式定義的不同規則集。
內容轉換（Content Transformations）
高級內容過濾器不僅可以刪除不允許的HTML元素、它們的類、樣式和屬性，而且可以試著通過將元素從一種形式轉換為另一種更喜歡的形式，從而統一輸入數據。
考慮加粗（Bold）功能。在HTML代碼中，它可以用<strong>、 <b>，或者甚至 <span style="font-weight:700|800|900|bold"> 元素來表示。假設 CKEDITOR.config.allowedContent設置僅含有對<b>的規則。這是否意味著當解析<string>或<span>元素時，會刪除它們？
不會。編輯器會將它們都轉換為<b>元素。結果是編輯器將只含有<b>元素，并且會保留粘貼內容的可視化形式。如果保留默認的CKEDITOR.config.allowedContent值（在自動模式中），也同樣如此--所有加粗的功能形式將被統一成偏愛的<strong>形式。
假設將'img[!src,alt,width,height]'設置（<img>標記帶有必需的src和三個可選的屬性）添加到允許內容規則中。圖像大小應該用屬性來設置，因此，作為例子，用樣式設置大小的粘貼圖像將被轉換成具有屬性的圖像（注意，不是所有情況都可能--只有基于像素的大小可以被轉換）。
內容轉換功能完全是自動的，不需要配置它。需要做的唯一的事情是設置CKEDITOR.config.allowedContent選項，或使用默認的值（自動模式）
目前，我們只是為幾個編輯器功能定義了內容轉換，但是在將來發布的版本中數量會增加。
允許內容規則（Allowed Content Rules）
注意：高級內容過濾器是在CKEditor 4.1中引入的。
簡介
允許內容規則定義了允許哪些HTML元素、屬性、樣式和類。當配置CKEditor時，你將對設置CKEDITOR.config.allowedContent選項最感興趣。插件開發人員也需要設置CKEDITOR.config.allowedContent屬性，告訴編輯器在自動模式中一項功能所允許哪些內容。
允許內容規則通常包括四個主要部分：
允許的元素，
這些元素可以有的屬性，
這些元素可以有的樣式，
這些元素可以有的類。
注意：替代書寫“屬性(attributes)、樣式(styles)和類(classes)”，使用“屬性”（properties）作為簡便的描述方法。
對于一個元素可以存在多項規則，一個元素可以被包含在多個元素列表中。例如，每一個規則可以允許另一元素屬性集。
規則是一個一個地應用的。初始時，被過濾的元素是無效的，其所有屬性都被拒絕。應用于該元素的第一條規則校驗它（它不會被刪除），并且該規則可能接受某些元素的屬性。另一條規則可能使編輯器接受更多的元素屬性。因此：
如果一個元素不存在規則，則刪除它。
可能接受一個元素，但拒絕其所有的屬性，然后就被刪除。
一旦被驗證，一個元素和它的屬性不能被另一規則使之失效。
字符串格式（String Format）
字符串格式是允許內容規則的緊湊表示法，但它沒有提供對象格式中可用的所有功能。但是，在大多數情況下，應該夠用了。
規則格式：
elements [attributes]{styles}(classes) 正則表達式模板：
<elements><styles, attributes, and classes><separator>/^([a-z0-9*/s]+)((?:/s*/{[!/w/-,/s/*]+/}/s*|/s*/[[!/w/-,/s/*]+/]/s*|/s*/([!/w/-,/s/*]+/)/s*){0,3})(?:;/s*|$)/i, 其中: