CKEditor与CKFinder整合
CKEditor与CKFinder整合
首先,下载2个插件包
CKEditor下载地址:http://ckeditor.com/
CKFinder下载地址:http://ckfinder.com/
1.然后创建项目,将解压的文件夹拷贝到项目中,编写页面代码如下:
- <%@ Page Language="C#"AutoEventWireup="true"CodeBehind="Default.aspx.cs"Inherits="CKEditor._Default"ValidateRequest="false" %>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <htmlxmlns="http://www.w3.org/1999/xhtml">
- <headrunat="server">
- <title></title>
- <!--引用脚本文件-->
- <scripttype="text/javascript"language="javascript"src="ckeditor/ckeditor.js"></script>
- <scripttype="text/javascript"language="javascript"src="ckfinder/ckfinder.js"></script>
- </head>
- <body>
- <formid="form1"runat="server">
- <div>
- <asp:TextBoxID="Content"runat="server"TextMode="MultiLine"Height="250px"Width="500px"></asp:TextBox>
- <!--这句脚本代码必须放在文件后面-->
- <scripttype="text/javascript">
- CKEDITOR.replace('<%=Content.ClientID%>', {});
- var editor = CKEDITOR.replace('<%=Content.ClientID%>');
- CKFinder.SetupCKEditor(editor, '../ckfinder/');
- </script>
- <asp:LiteralID="Literal1"runat="server"></asp:Literal>
- <asp:ButtonID="Button1"runat="server"OnClick="Button1_Click"Text="ok"/>
- </div>
- </form>
- </body>
- </html>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CKEditor._Default" ValidateRequest="false" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title></title> <!--引用脚本文件--> <script type="text/javascript" language="javascript" src="ckeditor/ckeditor.js"></script> <script type="text/javascript" language="javascript" src="ckfinder/ckfinder.js"></script> </head> <body> <form id="form1" runat="server"> <div> <asp:TextBox ID="Content" runat="server" TextMode="MultiLine" Height="250px" Width="500px"></asp:TextBox> <asp:Literal ID="Literal1" runat="server" ></asp:Literal> <asp:Button ID="Button1" runat="server" CssClass="ckeditor" OnClick="Button1_Click" Text="ok" /> </div> </form> </body> </html>
2.配置CKEditor下的config.js文件代码如下:
- CKEDITOR.editorConfig = function( config )
- {
- // Define changes to default configuration here. For example:
- // config.language = 'fr';
- // config.uiColor = '#AADC6E';
- config.language = 'zh-cn'; //中文
- config.uiColor = '#54ADD8'; //编辑器颜色
- config.font_names = '宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;微软雅黑;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana';
- config.toolbar_Full =
- [
- ['Source', '-', 'Preview', '-', 'Templates'],
- ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print', 'SpellChecker', 'Scayt'],
- ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
- ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
- '/',
- ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
- ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote', 'CreateDiv'],
- ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
- ['Link', 'Unlink', 'Anchor'],
- ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],
- '/',
- ['Styles', 'Format', 'Font', 'FontSize'],
- ['TextColor', 'BGColor'],
- ['Maximize', 'ShowBlocks', '-', 'About']
- ];
- config.toolbar_Basic =
- [
- ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink', '-', 'About']
- ];
- config.width =771; //宽度
- config.height = 260; //高度
- //如果需要使用ckfinder上传功能必须添下列代码
- config.filebrowserBrowseUrl = location.hash + '/ckfinder/ckfinder.html';
- config.filebrowserImageBrowseUrl = location.hash + '/ckfinder/ckfinder.html?Type=Images';
- config.filebrowserFlashBrowseUrl = location.hash+'/ckfinder/ckfinder.html?Type=Flash';
- config.filebrowserUploadUrl = location.hash + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';
- config.filebrowserImageUploadUrl = location.hash + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';
- config.filebrowserFlashUploadUrl = location.hash + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';
- };
CKEDITOR.editorConfig = function( config ) { // Define changes to default configuration here. For example: // config.language = 'fr'; // config.uiColor = '#AADC6E'; config.language = 'zh-cn'; //中文 config.uiColor = '#54ADD8'; //编辑器颜色 config.font_names = '宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;微软雅黑;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana'; config.toolbar_Full = [ ['Source', '-', 'Preview', '-', 'Templates'], ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print', 'SpellChecker', 'Scayt'], ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'], ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'], '/', ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'], ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote', 'CreateDiv'], ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], ['Link', 'Unlink', 'Anchor'], ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'], '/', ['Styles', 'Format', 'Font', 'FontSize'], ['TextColor', 'BGColor'], ['Maximize', 'ShowBlocks', '-', 'About'] ]; config.toolbar_Basic = [ ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink', '-', 'About'] ]; config.width =771; //宽度 config.height = 260; //高度 //如果需要使用ckfinder上传功能必须添下列代码 config.filebrowserBrowseUrl = location.hash + '/ckfinder/ckfinder.html'; config.filebrowserImageBrowseUrl = location.hash + '/ckfinder/ckfinder.html?Type=Images'; config.filebrowserFlashBrowseUrl = location.hash+'/ckfinder/ckfinder.html?Type=Flash'; config.filebrowserUploadUrl = location.hash + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files'; config.filebrowserImageUploadUrl = location.hash + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images'; config.filebrowserFlashUploadUrl = location.hash + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'; };
3.配置CKFinder下的Config.ascx文件:
首先配置下载权限
- public override bool CheckAuthentication()
- {
- // WARNING : DO NOT simply return "true". By doing so, you are allowing
- // "anyone" to upload and list the files in your server. You must implement
- // some kind of session validation here. Even something very simple as...
- //
- // return ( Session[ "IsAuthorized" ] != null && (bool)Session[ "IsAuthorized" ] == true );
- //
- // ... where Session[ "IsAuthorized" ] is set to "true" as soon as the
- // user logs on your system.
- // return fase;
- returntrue;
- }
public override bool CheckAuthentication() { // WARNING : DO NOT simply return "true". By doing so, you are allowing // "anyone" to upload and list the files in your server. You must implement // some kind of session validation here. Even something very simple as... // // return ( Session[ "IsAuthorized" ] != null && (bool)Session[ "IsAuthorized" ] == true ); // // ... where Session[ "IsAuthorized" ] is set to "true" as soon as the // user logs on your system. // return fase; return true; }
其次配置Config.ascx服务器文件路径,用于存储图片的文件夹
- BaseUrl = " ~/ckfinder/userfiles/";
BaseUrl = " ~/ckfinder/userfiles/";
该路径根据实际情况不同,设置也不同。
4.引用CKFinder文件中bin文件下的Release中ckfinder.dll否则会有错误。
至此配置已经完成。
注意事项:
1.运行的时候,可能出现例如:System.Web.HttpRequestValidationException: 从客户端(Content="<p>fdgdfgdfg</p>...")中检测到有潜在危险的 Request.Form 值的错误,
该错误需要在页面page标签中添加validateRequest="false".
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CKEditor._Default" ValidateRequest="false" %>
1、常见错误排除方法:
ckfind文件夹的config.ascx中找到如下语句
症状:因为安全原因,文件不可浏览。请联系系统管理员并检查CKFinder配置文件。
语句: public override bool CheckAuthentication() { reture false; }
原因:未设置用户身份验证或者用户未登录,设置为 reture true;(不进行用户身份验证)即可。
症状:未知错误
语句: public override bool CheckAuthentication() { reture true; }
原因:设置不进行用户身份验证,但是 BaseUrl 路径不对。
2、调试页面,出现“A potentially dangerous Request.Form value was detected from the client",按照经验,在web.config中增加
<system.web> <pages validateRequest="false" /> system.web>
还是同样错误,在页面头部加入,
还是出错。
3、编译的时候如果提示我AssemblyTitle、AssemblyCompany等属性重复,该错误可能是ckeditor,ckfinder示例代码中的AssemblyInfo.cs文件存在冲突,删除示例代码 source文件或者samples文件中的代码即可。