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