CKEditor & CKFinder集成

时间：2022-04-17 07:57:59
  • 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';

 };

相关文章