CKEditor插件的使用

富文本編輯很多地方需要用到，其中比較有名的是CKEditor，以前叫FCKEditor，雖然百度出的UEditor也比較火，但還是老牌子好用。

首先，去官網http://www.ckeditor.com下載最新版3.6.5的。然後刪除_samples和_source文件夾，在項目根目錄下新建個文件夾，名字自己估摸着起，叫ckeditor吧，然後把剩餘的全部拷貝進去。初步的配置就這樣。

下面是使用方法。

首先頁面中需要引用ckeditor.js這個文件，按上述路徑，就是<script type="text/javascript" src="~/ckeditor/ckeditor.js"></script>

然後在使用的位置如下代碼所示：

	<textarea name="content" id="content"></textarea>
        <script type="text/javascript">
            var editorContent;
            $(document).ready(function () {
                editorContent = CKEDITOR.replace("content");
            });
        </script>

然後就是一些常用接口

獲得值：getData()

設置值：setData("******")

追加插入值：insertHTML("*******")

上述代碼中，editorContent獲得了實例，就可以通過editorContent.getData()獲得編輯框裏的html內容了

獲得的值和設置的值以及插入的都是html格式的字符串

（如果你用的MVC的話，因爲有特殊字符默認是不允許提交的，需要在HttpPost的action上加[AcceptVerbs(HttpVerbs.Post)]和[ValidateInput(false)]屬性標記

如下圖：

        [HttpPost]
        [AcceptVerbs(HttpVerbs.Post)]
        [ValidateInput(false)]
        public ActionResult Create(string title, string content, string id)
        {
            //todo
        }

）

還有個就是編輯框的自定義配置，

打開ckeditor文件夾下的config.js文件，如下圖所示：

/*
Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

CKEDITOR.editorConfig = function( config )
{
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
	// config.uiColor = '#AADC6E';
};

可以自己配置一些東西，例如，要設置編輯框的寬度爲500px，就添加一句config.width=500;即可，其他的自己試試

還有就是toolbar的配置，有兩個Full和Basic，默認是Full，可以通過上面的config.toobar="Basic";設置成簡單模式。插件本身這兩種模式的定義如下

注意工具按鈕是分組的，一個name內的大括號就是一個工具按鈕分組，items後邊是具體的按鈕，“/”表示工具欄換行，“-”表示工具圖標之間的中隔線“|”

config.toolbar = 'Full';
 
config.toolbar_Full =
[
    { name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
    { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
    { name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
    { name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 
        'HiddenField' ] },
    '/',
    { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
    { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv',
    '-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
    { name: 'links', items : [ 'Link','Unlink','Anchor' ] },
    { name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
    '/',
    { name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
    { name: 'colors', items : [ 'TextColor','BGColor' ] },
    { name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];
 
config.toolbar_Basic =
[
    ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
];

它們和圖標是對應的

例如上圖中Basic模式中的幾個按鈕就對應着

['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']

所以要自己定義想顯示的圖標，就得照着圖，找對應的字符串是什麼

然後在config.js中配置，我自己配置的代碼如下：

CKEDITOR.editorConfig = function (config) {
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
    config.width = 550;
    config.toolbar = 'MyToolbar';

    config.toolbar_MyToolbar =
    [
        ['Undo', 'Redo', '-', 'SelectAll', 'RemoveFormat'],
        ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
        ['Maximize'],
        '/',
        ['Format', 'Font', 'FontSize'],
        ['TextColor', 'BGColor'],
        ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript']
    ];
};

效果如下圖：

工具欄的定義英漢對照說明：
-
Save = 保存(提交表單)
NewPage = 新建
Preview = 預覽
- = 分割線
Templates = 模板
Cut = 剪切
Copy = 複製
Paste = 粘貼
PasteText = 粘貼爲無格式文本
PasteFromWord = 從 MS WORD 粘貼
-
Print = 打印
SpellChecker = 拼寫檢查
Scayt = 即時拼寫檢查
Undo = 撤銷
Redo = 重做
-
Find = 查找
Replace = 替換
-
SelectAll = 全選
RemoveFormat = 清除格式
Form = 表單
Checkbox = 複選框
Radio = 單選框
TextField = 單行文本
Textarea = 多行文本
Select = 列表/菜單
Button = 按鈕
ImageButton = 圖片按鈕
HiddenField = 隱藏域
/
Bold = 加粗
Italic = 傾斜
Underline = 下劃線
Strike = 刪除線
-
Subscript = 下標
Superscript = 上標
NumberedList = 編號列表
BulletedList = 項目列表
-
Outdent = 減少縮進量
Indent = 增加縮進量
Blockquote = 塊引用
CreateDiv = 創建DIV容器
JustifyLeft = 左對齊
JustifyCenter = 居中
JustifyRight = 右對齊
JustifyBlock = 兩端對齊
BidiLtr = 文字方向從左到右
BidiRtl = 文字方向從右到左
Link = 插入/編輯超鏈接(上傳文件)
Unlink = 取消超鏈接
Anchor = 插入/編輯錨點鏈接
Image = 圖像(上傳)
Flash = 動畫(上傳)
Table = 表格
HorizontalRule = 插入水平線
Smiley = 插入表情
SpecialChar = 插入特殊符號
PageBreak = 插入分頁符
/
Styles = 樣式快捷方式
Format = 文本格式
Font = 字體
FontSize = 文字大小
TextColor = 文字顏色
BGColor = 背景顏色
Maximize = 全屏編輯模式
ShowBlocks = 顯示區塊
-
About = 顯示關於

Source = 源碼模式