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

 

posted @ 2013-09-21 23:39  hg一如既往  阅读(594)  评论(0编辑  收藏  举报