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 值。