CKEditor & CKFinder集成

最新推荐文章于 2025-06-14 15:16:05 发布

weixin_30675247

最新推荐文章于 2025-06-14 15:16:05 发布

阅读量70

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/han1982/p/3332369.html

本文详细介绍了如何在ASP.NET应用中集成CKEditor和CKFinder。通过将CKEditor组件和CKFinder插件正确配置，可以实现在线编辑HTML内容及图片上传功能。文章包括关键配置步骤、代码示例及注意事项，帮助开发者轻松实现富文本编辑与图片管理。

CKEditor集成

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

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

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

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

CKFinder集成

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

①将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';
 };