文本编辑器-->CKEditor+CKFinder使用与配置

一、CKEditor介绍

　　官网地址：http://ckeditor.com

　　CKEditor下载地址：http://ckeditor.com/download

　　CKFinder（免费版本）下载地址：http://cksource.com/ckfinder/download

　　CKEditorAPI：http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html

　　

二、安装使用

　　本文使用版本：CKEditor：4.4.2，CKFinder：2.4.1

　　1.将下载解压后的文件，放到同级目录下。需要注意的是CKFinder的_source文件夹下存放的是上传图片源码。两个文件夹有很多东西是不需要的，根据个人情况可做适当删除。

　　2.引用CKEditor核心JS文件<script src="~/Content/js/plugins/ckeditor/ckeditor.js"></script>

　　3.替换textarea标签。

1 2 3 4 5

CKEDITOR.replace( 'textarea_nameorid', {     toolbar : 'Basic',     uiColor : '#9AB8F3' });

　　options也可以直接写到config.js文件中

1 2 3 4 5

CKEDITOR.editorConfig = function( config ) {     config.toolbar= 'Basic';     config.uiColor = '#9AB8F3'; };

　　定制自己的config.js

1 2 3 4

CKEDITOR.replace( 'textarea_nameorid', {     customConfig : '/custom/ckeditor_config.js' });

　　4.新版CKEditor取消了自动同步内容功能，提交表单前手动同步内容

1 2 3

for (instance in CKEDITOR.instances) {     CKEDITOR.instances[instance].updateElement(); }

　　5.新版CKEditor取消了上次本地图片功能。为了实现本地图片上传，需要配合使用CKFinder插件

　　1>添加bin目录下的dll项目引用。（注：代码是开源的，不懒的同志可以从_source目录下打开项目，编写适合自己的代码）

　　2>修改config.ascx文件

1 2 3 4

public override bool CheckAuthentication() {     return true; }<br><br>　　BaseUrl = "/Upload/CKFinder/"

　　3>引用CKFinder核心JS文件<script src="~/Content/js/plugins/ckfinder/ckfinder.js"></script>

　  4>关联CKEditor和CKFinder这两个插件，打开CKEditor的config.js，贴入以下代码

1 2 3 4 5 6 7 8 9 10 11 12 13

var ckfinderPath = "/Content/js/plugins/ckfinder"; //ckfinder路径   config.filebrowserBrowseUrl = ckfinderPath + '/ckfinder.html';   config.filebrowserImageBrowseUrl = ckfinderPath + '/ckfinder.html?type=Images';   config.filebrowserFlashBrowseUrl = ckfinderPath + '/ckfinder.html?type=Flash';   config.filebrowserUploadUrl = ckfinderPath + '/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';   config.filebrowserImageUploadUrl = ckfinderPath + '/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';   config.filebrowserFlashUploadUrl = ckfinderPath + '/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';