CKEditor & CKFinder集成

• CKEditor集成

1. CKEditor(原名FckEditor): 著名的HTML编辑器(可在线编辑HTML)
2. 配置:

①将CKEditor中的(adapters images lang plugins skins themes ckeditor.js config.js contents.css)解压到js目录 在页面中引用ckeditor.js

②设置多行文本框的class/CssClass=“ckeditor”(CSS强大) 代码中仍可以通过TextBox控件的Text属性访问编辑器内容

1. 由于页面提交时asp.net会把富文本编辑器中的html内容当成攻击内容 因此需要在aspx中的Page标签中设置ValidateRequest=“false”来禁用攻击检测(2010中还需要根据报错信息修改WebConfig来禁用XSS检测)

• CKFinder集成

1. CKFinder(一个CKEditor插件): 用于为CKEditor提供图片上传功能
2. 配制:

①将bin/Release下的CKFinder.dll添加到项目的引用(library文件夹)

②将(core ckfinder.js ckfinder.html config.ascx)解压到CKFinder自己的目录

③按照文档修改CKEditor的config.js 将上传的处理程序设定为CKFinder(见代码1/注意路径问题)

CKEDITOR.editorConfig = function( config )
 {
     // Define changes to default configuration here. For example:
     // config.language = 'fr';
     // config.uiColor = '#AADC6E';

     //改成ckfinder的绝对路径，从网站的本目录开始
     var ckfinderPath = "/admin/js";
     config.filebrowserBrowseUrl = ckfinderPath + '/ckfinder/ckfinder.html';
     config.filebrowserImageBrowseUrl = ckfinderPath + '/ckfinder/ckfinder.html?Type=Images';
     config.filebrowserFlashBrowseUrl = ckfinderPath + '/ckfinder/ckfinder.html?Type=Flash';
     config.filebrowserUploadUrl = ckfinderPath + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';
     config.filebrowserImageUploadUrl = ckfinderPath + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';
     config.filebrowserFlashUploadUrl = ckfinderPath + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';
 };