配置CKEditor

    主要有三種方式配置CKEditor，可以在 CKEditor API 中CKEDITOR.config 部分查看所有可配置選項。

一、在頁面中配置

    在頁面中進(jìn)行配置是CKEditor官方推薦的方式，這樣可以避免修改CKEditor原始的配置文件，使得應(yīng)用進(jìn)行升級時更加便捷?？梢栽谌我獾膭?chuàng)建CKEditor實例的方法中對其進(jìn)行配置，如CKEDITOR.replace 和 CKEDITOR.appendTo ：

Js代碼  

1. CKEDITOR.replace( 'editor1',  
2.     {  
3.         toolbar : 'Basic',  
4.         uiColor : '#9AB8F3'  
5.     });  

二、在config.js中配置

    默認(rèn)情況下，這個文件基本是空的，可以在這個文件中進(jìn)行你所需配置，如：

Js代碼  

1. CKEDITOR.editorConfig = function( config )  
2. {  
3.     config.language = 'fr';  
4.     config.uiColor = '#AADC6E';  
5. };  

三、自定義配置文件

    若不想更改config.js文件，CKEditor 也允許用戶自定義自己的配置文件。在任意位置創(chuàng)建一份config.js的拷貝，如在根目錄下創(chuàng)建一個名為“custom”的文件夾，將config.js文件拷貝至此文件夾，并重命名為“ckeditor_config.js ”，這樣，在創(chuàng)建CKEditor實例時，就可以指定此文件為CKEditor的配置文件：

Js代碼  

1. CKEDITOR.replace( 'editor1',  
2.     {  
3.         customConfig : '/custom/ckeditor_config.js'  
4.     });  

定義工具欄

    CKEditor提供了許多工具欄按鈕，可以根據(jù)需要自由選擇所需的部分?；蚴褂?CKEditor 提供的兩種的工具欄風(fēng)格：

Js代碼  

1. config.toolbar = 'Full';  
2.    
3. config.toolbar_Full =  
4. [  
5.     ['Source','-','Save','NewPage','Preview','-','Templates'],  
6.     ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],  
7.     ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],  
8.     ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],  
9.     '/',  
10.     ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],  
11.     ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],  
12.     ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],  
13.     ['BidiLtr', 'BidiRtl'],  
14.     ['Link','Unlink','Anchor'],  
15.     ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe'],  
16.     '/',  
17.     ['Styles','Format','Font','FontSize'],  
18.     ['TextColor','BGColor'],  
19.     ['Maximize', 'ShowBlocks','-','About']  
20. ];  
21.    
22. config.toolbar_Basic =  
23. [  
24.     ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']  
25. ];  

若想自定義工具欄按鈕，可在config.js配置如下片段：

Js代碼  

1. CKEDITOR.editorConfig = function( config )  
2. {  
3.     config.toolbar = 'MyToolbar';  
4.    
5.     config.toolbar_MyToolbar =  
6.     [  
7.         ['NewPage','Preview'],  
8.         ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Scayt'],  
9.         ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],  
10.         ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],  
11.         '/',  
12.         ['Styles','Format'],  
13.         ['Bold','Italic','Strike'],  
14.         ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],  
15.         ['Link','Unlink','Anchor'],  
16.         ['Maximize','-','About']  
17.     ];  
18. };  

若應(yīng)用中定義了多種工具欄風(fēng)格，可在創(chuàng)建CKEditor實例時，為其指定一種：

Js代碼  

1. CKEDITOR.replace( 'editor1',  
2.     {  
3.         toolbar : 'MyToolbar'  
4.     });  
5.    
6. CKEDITOR.replace( 'editor2',  
7.     {  
8.         toolbar : 'Basic'  
9.     });  

你也可以在創(chuàng)建實例時，直接為其定義工具欄選項：

Js代碼  

1. CKEDITOR.replace( 'editor1',  
2.     {  
3.         toolbar :  
4.         [  
5.             ['Styles', 'Format'],  
6.             ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', '-', 'About']  
7.         ]  
8.     });  

樣式

    我們可以自定義CKEditor工具欄中“樣式”下拉列表的內(nèi)容，CKEditor提供了許多默認(rèn)的樣式，默認(rèn)的樣式列表定義在“plugins/styles/styles/default.js”文件中?？梢酝ㄟ^如下形式定義自己的樣式列表，并將其注冊到 CKEditor中：

Js代碼  

1. CKEDITOR.stylesSet.add( 'my_styles',  
2. [  
3.     // Block-level styles  
4.     { name : 'Blue Title', element : 'h2', styles : { 'color' : 'Blue' } },  
5.     { name : 'Red Title' , element : 'h3', styles : { 'color' : 'Red' } },  
6.    
7.     // Inline styles  
8.     { name : 'CSS Style', element : 'span', attributes : { 'class' : 'my_style' } },  
9.     { name : 'Marker: Yellow', element : 'span', styles : { 'background-color' : 'Yellow' } }  
10.     // Object styles  
11.     { name : 'A Style', element : 'a', attributes : { 'color':'#000','text-decoration':'none' } },  
12.  ]);  

其中，“my_styles”是自定義樣式的名稱，必須是唯一的。定義好之后，就可以通知CKEditor實例使用這個樣式了：

Java代碼  

1. config.stylesSet = 'my_styles';  

    自定義的樣式可以配置在config.js中、CKEditor實例的jsp頁面，或者一個單獨的文件，甚至一個已知的URL中，可以通過如下形式指定它的位置：

Java代碼  

1. config.stylesSet = 'my_styles:/styles.js';  
2.    
3. OR  
4.    
5. config.stylesSet = 'my_styles:http://www./styles.js';  

    一條自定義的樣式包括：name、element、 attributes，和CSS樣式的定義，如：

Js代碼  

1. {  
2.     name : '在樣式下拉列表中顯示的名稱',  
3.     element : 'HTML元素的名稱 (如 "span")',  
4.     styles :  
5.     {  
6.         'css-style1' : 'desired value',  
7.         'css-style2' : 'desired value',  
8.         ...  
9.     }  
10.     attributes :  
11.     {  
12.         'attribute-name1' : 'desired value',  
13.         'attribute-name2' : 'desired value',  
14.         ...  
15.     }  
16. }  

其中，name 和 element元素是必選的，其它是可選的。

    CKEditor有三種級別的元素樣式，分別是：

Block-level styles（塊級元素樣式） – 應(yīng)用于文本塊（段落）。適用于以下元素 These apply to the following elements: address , div , h1 , h2 , h3 , h4 , h5 , h6 , p , and pre .

Object styles（對象元素樣式） – 應(yīng)用于特殊的可被選擇的對象（不是文本），當(dāng)一個對象被選中之后才被顯示。適用于以下對象： a , embed , hr , img , li , object , ol , table , td , tr and ul .

Inline styles（內(nèi)聯(lián)元素樣式） – 用于擴(kuò)展被選中的文本樣式。