MVC5富文本編輯器CKEditor配置CKFinder

富文本編輯器CKEditor的使用

富文本編輯器CKEditor配置CKFinder

由于網站要實現圖片和文字的混排的上傳 所以在網上找了富文本編輯器的插件，發現CKEditor這款還不錯的插件

我用的是4.5.1這個版本，的確很好用，只是引用了一個js文件就可以實現。

1. 將網上下的CKEditor包解壓放在根目錄下

2. 在頁面上引用CKEditor的核心包ckeditor.js

   <script src="ckeditor/ckeditor.js" type="text/javascript"></script>;

3. 在頁面添加一個輸入框textarea

    <textarea name="individual" id="individual" runat="server"></textarea> <script type="text/Javascript">  CKEDITOR.replace('individual');

只要通過上面上面幾個步驟就能實現富文本編輯器，但是點開圖片上傳功能，發現只有上傳url的功能，并不能本地上傳圖片，百度了一下發現由于安全性問題CKEditor沒有上傳功能，只有安上CKFinder才能實現上傳功能，于是我在官網下了ckfinder_aspnet2.5.0.1,同CKEditor一樣引用JS文件（只要引用ckfinder.js)

     <script src="ckfinder/ckfinder.js" type="text/javascript"></script>

• 由于我是MVC的網站基于.net4.5，在官方給的包里面有一個asp.net網站實例放在_source文件夾里面，里面有一個基于.net2的示例網站，一運行就報找不到 System.Web.UI.Design這個命名空間的錯，所以我把它從項目中排除，把項目中bin中debug文件夾下的CKFinder.dll復制出來，引用到我自己的項目中。

接下來要配置CKEditor來讓CKFinder引用進來，在CKEditor文件夾下config.js在CKEDITOR.editorConfig = function (config) {};方法中添加如下代碼：

 config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?Type=Images'; config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?Type=Flash';  config.filebrowserUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';config.filebrowserImageUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';config.filebrowserWindowWidth = '800';  //“瀏覽服務器”彈出框的size設置config.filebrowserWindowHeight = '500';

注意在配置Url的時候要修改成相對于網站本地網站磁盤文件路徑，比如說，你的網址是http://example.com.cn ,你把ckfinder文件夾放在Admin下的Editor文件夾，那么所有url要改成下面類似的格式

config.filebrowserImageBrowseUrl ='/Admin/Editor/ckfinder/ckfinder.html?Type=Images';

否則會報404錯誤，

最后一步是修改一個函數讓所有人能看到服務器上傳文件夾里面的文件，在ckfinder文件夾下面的cofig.ascx文件，找到 CheckAuthentication函數將返回值改成true

當然如果你想修改上傳文件的地址，你可以在上面方法里面找到SetConfig()方法，找到BaseUrl，修改為你想上傳的地址，

PS：

我是在在VS里面進行調試的，由于VS的IIS在調試的時候不允許對磁盤文件的路由地址訪問，就是CKFinder通過ckfinder.html這個html來實現上傳圖片的功能，但是這個在調試的時候VS無法訪問這個文件，所以一直報404錯誤，可以修改IIS來允許IIS訪問磁盤文件，步驟如下：

1. 右鍵點擊IIS ExPRess，選擇顯示所有應用程序
2. 找到運行網站的配置，進入applicationhost.config文件夾
3. ctrl+f 尋找UrlRoutingModule
4. 將preCodition設置為空字符

如果你是用MVC進行表單傳值的話，你必須在post方法上面添加 [ValidateInput(false)] 屬性，如果不這樣的話就會報下面的錯

    “/”應用程序中的服務器錯誤。    從客戶端(content="<p>sdfsdafwewo shdfh...")中檢測到有潛在危險的 Request.Form 值。