CKEdiotr是一款不错的网页富文本编辑器,其内置的功能最大满足用户的需求,先将CKEditor的简单实用做个总结,以便于日后查看、使用。我用的是.net平台,故而以下介绍的是.net的CKEditor。
第一步:获取CKEditor工具。
1.1在官网的下载页面下载你所需要的语言的CKEditor,官网是:http://ckeditor.com/download ,选择CKEditor 3.6.4 for ASP.NET(若有最新版本,建议使用最新版本,下同)。
1.2 只有CKEditor还是不够的,因为CKEditor只有富文本编辑功能没有上传功能,所以下载一个与之配套的CKFinder,官网是:http://cksource.com/ckfinder/download ,选择.net版本。
第二步:引用到项目中
2.0 把CKEditor和CKFinder两个文件复制到项目的适当位置(建议是UI层的根目录)。
2.1 使用CKEditor的时候需要在页面引用js,在解压后的CKEditor文件夹的根目录下引用ckeditor.js、config.js、ckeditor_basic.js这三个文件。
2.2 同样,需要引用CKFinder里的js文件:ckfinder.js、ckfinder_v1.js。
2.3 找到解压后的CKEditor文件夹中的ckeditor_aspnet_3.6.4\bin\Release目录下的CKEditor.NET.dll文件,复制到项目的Bin文件夹下并引用
2.4 找到解压后CKFinder文件夹中的ckfinder\bin\Release目录下的CKFinder.dll文件,复制到项目Bin文件夹中并引用。
2.5 页面注册:<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>
第三步:配置CKEditor和CKFinder
3.1 CKEditor中的config.js文件是对CKEditor的配置,这里可以自定义一些自己所需要的功能,一般的,我们只需定义编辑器的语言、背景色、高度、宽度、样式、皮肤、工具栏等这些基础的东西,这些使用手写代码设置的,具体的代码如下:
config.language='zh-cn';//中文
config.skin='kama';//皮肤
//取消“拖拽改变尺寸”功能
config.resize_enabled = false;
config.width=900;//宽
config.height=400;//高
// config.uiColor = '#FFF'; //背景颜色
//全能工具栏
config.toolbar = "Full";
// 基础工具栏
// config.toolbar = "Basic";
config.font_names='宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;微软雅黑/微软雅黑;'+ config.font_names;
// 自定义工具栏
// config.toolbar =
// [
// ['Source', '-', 'Preview'], ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'], ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'], ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote', 'ShowBlocks'], '/',
// ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'], ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], ['Link', 'Unlink', 'Anchor'], ['Image', 'Flash', 'Table', 'HorizontalRule', 'SpecialChar'], '/',
// ['Styles', 'Format', 'Font', 'FontSize'], ['TextColor', 'BGColor'], ['Maximize', '-', 'About']
// ];
config.tabSpaces = 4;
config.resize_maxWidth = 600; //如果设置了编辑器可以拖拽 这是可以移动的最大宽度
config.toolbarCanCollapse = false; //工具栏可以隐藏
//config.toolbarLocation = 'bottom'; //可选:设置工具栏在整个编辑器的底部bottom
config.resize_minWidth = 600; //如果设置了编辑器可以拖拽 这是可以移动的最小宽度
config.resize_enabled = false; //如果设置了编辑器可以拖拽
//验证非法数据
config.protectedSource.push( /<\s*iframe[\s\S]*?>/gi ) ; // <iframe> tags.
config.protectedSource.push( /<\s*frameset[\s\S]*?>/gi ) ; // <frameset> tags.
config.protectedSource.push( /<\s*frame[\s\S]*?>/gi ) ; // <frame> tags.
config.protectedSource.push( /<\s*script[\s\S]*?\/script\s*>/gi ) ; // <SCRIPT> tags.
config.protectedSource.push( /<%[\s\S]*?%>/g ) ; // ASP style server side code
config.protectedSource.push( /<\?[\s\S]*?\?>/g ) ; // PHP style server side code
config.protectedSource.push( /(<asp:[^\>]+>[\s|\S]*?<\/asp:[^\>]+>)|(<asp:[^\>]+\/>)/gi ) ;
//config.startupFocus = true; //打开时就focus
注意:这些代码全部是在config.js文件中的CKEDITOR.editorConfig = function( config ){};方法内;
3.2在CKEditor中集成CKFinder
3.2.1 在CKEditor的config.js中CKEDITOR.editorConfig = function( config ){};函数内添加如下语句:
//集成CKFinder
CKFinder.SetupCKEditor(null, '../ckfinder/');//第二个参数是ckfinder文件夹的路径,注意路径要正确
这句就是在CKEditor中集成CKFinder的语句,该语句不可少。否则不能上传图片视频等。
3.2.2 打开 " \ckfinder\config.ascx ",修改 BaseUrl 为 BaseUrl = "~/ckfinder/userfiles/";
// 注意“~” 以 userfiles 为默认路径,其目录下会自动生成images、flash等子目录。
第四步:在项目中调用CKEditor
调用的时候有人说可以把CKEditor放入工具栏中,直接拖动使用,这个方法我没有做出来(找到了,见下文),所以又找了个方法:直接用TextBox控件,具体的使用方法如下代码:
<asp:TextBox id="txtContent" class="ckeditor" TextMode="MultiLine" Text='<%# Bind("info") %>' runat="server"></asp:TextBox>
这种使用方法与其他.net控件使用方法相同,设置Text='<%# Bind("info") %>' 可以方便与数据源进行交互;使用CKEditor必须定义class="ckeditor"
附加
F1、 常见错误及排除:
ckfind文件夹的config.ascx中找到如下语句
症状:因为安全原因,文件不可浏览。请联系系统管理员并检查CKFinder配置文件。
语句:
public override bool CheckAuthentication()
{
reture false;
}
原因:未设置用户身份验证或者用户未登录,设置为 reture true;(不进行用户身份验证)即可。
症状:未知错误
语句:
public override bool CheckAuthentication()
{
reture true;
}
原因:设置不进行用户身份验证,但是 BaseUrl 路径不对。
调试页面,出现“A potentially dangerous Request.Form value was detected from the client",按照经验,在web.config中增加
<system.web>
<pages validateRequest="false"/>
system.web>
还是同样错误,在页面头部加入,
还是出错。
后来终于试着在config.js文件中添加下面一行:
config.htmlEncodeOutput = true;
OK!
F2、 解压后的CKEditor和CKFinder文件释义,如下图
图F2-1 CKFinder文件夹
图F2-2 CKEditor文件夹
F3、Config.js文件里的其他设置
//自定义的一些表情图片,对应的也要将表情包中名词改变;
config.smiley_images = ['1.gif','2.gif','3.gif','4.gif','5.gif','6.gif','7.gif','8.gif','9.gif','10.gif','11.gif','12.gif','13.gif','14.gif','15.gif','16.gif',
'17.gif','18.gif','19.gif','20.gif','21.gif','22.gif','23.gif','24.gif','25.gif','26.gif','27.gif','28.gif','29.gif','30.gif',
'31.gif','32.gif','33.gif','34.gif','35.gif','36.gif','37.gif','38.gif','39.gif','40.gif','41.gif','42.gif','43.gif','44.gif',
'45.gif','46.gif',"47.gif",'48.gif','49.gif','50.gif','51.gif','52.gif','53.gif','54.gif','55.gif','56.gif','57.gif','58.gif',
'59.gif','60.gif','61.gif','62.gif','63.gif','64.gif','65.gif','66.gif','67.gif','68.gif','69.gif','70.gif','71.gif','72.gif'];
//设置工具栏里面的工具 最主要的config.toolbar = [
['Bold','Italic','Underline','Strike','FontSize','NumberedList','BulletedList','Outdent','Indent','JustifyLeft',
'JustifyCenter','JustifyRight','Link','Unlink','TextColor','BGColor','Image','Flash','Smiley','Table',
'RemoveFormat','Source']
];
工具设置:
config.toolbar =
[
['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
['Link', 'Unlink', 'Anchor'],
['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],
['Font', 'FontSize'],
['TextColor', 'BGColor'],
[ 'Undo', 'Redo']
];
F4、把CKEditor放入VS的自定义工具栏
首先找到ckeditor_aspnet_3.6.4\bin\Release目录下的CKEditor.NET.dll文件,放在一个不容易删且合适的位置,在VS的工具栏中右击,然后选择添加选项卡,设置名字为CKEditor,在CKEditor选项卡中右击,选择“选择项”,在“.NET Framework组件”中浏览到你刚才放的dll文件,然后确定。OK搞定!现在CKEditorControl控件已经出现在你的工具选项卡里了,其使用你可以参考TextBox的使用。