基于MVC+EasyUI的Web開發(fā)框架經(jīng)驗總結(jié)（5）--使用HTML編輯控件CKEditor和CKFinder

Web開發(fā)上有很多HTML的編輯控件，如CKEditor、kindeditor等等，很多都做的很好,本文主要介紹在MVC界面里面，CKEditor的配置和使用。CKEditor的前身是FCKEditor，隨著它的更新，上傳圖片的功能被分離出去了，現(xiàn)在如果需要實現(xiàn)上傳圖片，要么自己寫代碼或者采用其他上傳控件（如Uploadify)，還有一種方法是使用CKFinder，這兩者的合并使用，能給我們帶來更多的方便。

1、CKEditor的使用

CKEditor的下載地址是http://ckeditor.com/download，里面可以根據(jù)需要進行樣式的定制，本文主要介紹當前較新的版本4.4.1的繼承使用。而CKFinder的下載地址是：http://ckfinder.com/download。

CKEditor的使用比較簡單，一般情況下根據(jù)官方的指引選擇適當?shù)臉邮较螺d就可以了，使用的時候，基本不需要怎么樣修改配置文件。在MVC的視圖頁面里面，添加相關(guān)的引用文件就可以了。

@*添加對ckeditor的支持*@
<script src="~/Content/JQueryTools/ckeditor/ckeditor.js"></script>
<script src="~/Content/JQueryTools/ckeditor/adapters/jquery.js"></script>

然后在界面添加需要編輯HTML內(nèi)容的textarea控件，由于我的使用的是EasyUI的控件，因此設(shè)置了控件樣式class="easyui-validatebox"，也可以不管這里。

<tr>
	<th>
		<label for="Content">內(nèi)容：</label>
	</th>
	<td>
		<textarea class="easyui-validatebox" id="Content" name="Content" ></textarea>
	</td>
</tr>

我們一般使用的時候，需要一段javascript腳本進行初始化對應(yīng)的控件，初始化代碼如下所示。

<script>
	function initEditor() {
		$('#Content').ckeditor();//控件1
		$('#Content1').ckeditor();//控件2
	}
</script>

添加相應(yīng)的腳本和控件初始化代碼后，就可以在界面中呈現(xiàn)出需要的效果了。

而之后的控件使用，就和普通的使用沒有兩樣了，如賦值語句如下所示。

$('#Content1').val(info.Content);//ckeditor賦值

獲取控件的值，也和普通給的一樣

var content = $("#Content1").val();

2、CKFinder的集成使用

雖然CKFinder已經(jīng)獨立出來，但是它也提供了完美的整合效果，我們把它下載后，在壓縮包里面的bin目錄里面找到相應(yīng)的 ckFinder.dll，把它添加我們項目工程的引用里面去，我們才能正常使用文件上傳功能。

然后修改config.ascx文件里面的一些設(shè)置，使得我們能夠順利使用。

第一步設(shè)置CheckAuthentication函數(shù)返回True。

public override bool CheckAuthentication()
{
			return true;
}

第二步是設(shè)置SetConfig函數(shù)里面的BaseURL，這個基礎(chǔ)地址需要設(shè)置和我們項目的地址一致，否則上傳文件有問題。

public override void SetConfig()
{
	// The base URL used to reach files in CKFinder through the browser.
	BaseUrl = "/Content/JQueryTools/ckfinder/userfiles/";

	 ........................

第三步，整合CKFinder到CKEditor，前面說了CKEditor默認是沒有文件上傳的功能操作的，需要添加CKFinder并進行配置才可以使用。

這步驟需要在CKEditor里面的config.js文件里面修改下面的配置參數(shù)（紅色部分就可以了）。

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here.
    // For complete reference see:
    // http://docs.ckeditor.com/#!/api/CKEDITOR.config

.......................

    config.filebrowserBrowseUrl = '/Content/JQueryTools/ckfinder/ckfinder.html'; //上傳文件時瀏覽服務(wù)文件夾
    config.filebrowserImageBrowseUrl = '/Content/JQueryTools/ckfinder/ckfinder.html?Type=Images'; //上傳圖片時瀏覽服務(wù)文件夾
    config.filebrowserFlashBrowseUrl = '/Content/JQueryTools/ckfinder/ckfinder.html?Type=Flash';  //上傳Flash時瀏覽服務(wù)文件夾
    config.filebrowserUploadUrl = '/Content/JQueryTools/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files'; //上傳文件按鈕(標簽) 
    config.filebrowserImageUploadUrl = '/Content/JQueryTools/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images'; //上傳圖片按鈕(標簽) 
    config.filebrowserFlashUploadUrl = '/Content/JQueryTools/ckfinder/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'; //上傳Flash按鈕(標簽)
};

3、集成效果展示

通過以上代碼進行整合，在插入圖片的操作頁面里面，會增加一個瀏覽服務(wù)器按鈕，上傳操作選項卡等功能，方便對文件的瀏覽和上傳操作，具體效果如下所示。

以上就是我在我的Web框架里面整合的HTML編輯控件和CKFinder文件上傳組件，這兩個組合起來，能夠非常方便構(gòu)建圖文并茂的文章內(nèi)容。

4、MVC的處理

這里需要注意的是由于textarea中有特殊字符，出于安全原因，默認情況mvc框架不允許提交的，應(yīng)在相應(yīng)方法上加上[ValidateInput(false)]屬性。

如我為了提交HTML內(nèi)容，需要在控制器對象里面，重寫了內(nèi)容的寫入和更新操作函數(shù)，如下所示。

[ValidateInput(false)]
public override ActionResult Insert(InformationInfo info)
{
	info.Editor = CurrentUser.Name;
	info.EditTime = DateTime.Now;

	return base.Insert(info);
}

[ValidateInput(false)]
public override ActionResult Update(string id, FormCollection formValues)
{
	return base.Update(id, formValues);
}