最近才开始学习asp.net动态网页制作,涉及到后台文字图片编辑的时候用到了CKEditor和CKFinder
网上找了很多资料,发现都不尽如人意,自己整了一个晚上,终于有点心得体会,发表在这里。如有什么不对的地方还望大牛们批评指出。本人第一次写技术博文,有什么不足的地方请大家见谅,新手啊新手!!!
一、下载CKEditor,下载地址:
CKEditor:http://ckeditor.com/download
注:需要下载的是CKEditor和CKEditor.NET。
CKFinder:http://ckfinder.com/download
注:下载CKFinder时注意选择的是ASP.NET的版本,默认是PHP别下错了。
二、配置
CKEditor的配置
解压下载所得的3个文件夹,分别是ckfinder,ckeditor和asp.net。
可以删除文件夹内部分内容:
ckeditor:_samples:这是一个示例,可以删除。
_source:这里是javascript的源代码,其实下面的文件夹中已经包含,不想自己拓展开发的可以删除。
lang:这是多语言支持包,我们这里就使用中文和英文,可以将里面除了en,zh开头的*.js文件都删除。
skin:主题皮肤,选择自己想要的一个主题,删除不必要的。
CHANGES/LICENSE/INSTALL.Html:分别是版本更新、授权、安装指导,可删除。
其他*.asp,*.php的文件:在其他开发环境中用到,可删除。
asp.net: 我们这里只需要用到其中bin/Release文件夹下CKEditor.NET.dll的动态库就可以了,其他可以都删除
ckfinder:同理删除
_samples,_source,3个*.txt文档,以及skin,lang中部分内容
help文件夹中除了en文件夹外的其他文件夹(当然你可以全部删除,不过这样在点击ckfinder帮助的时候,就不会有内容出现)
bin文件夹参照asp.net文件夹中bin的操作。
好了,看一下,ckeditor和ckfinder文件夹从原来的5.67和2.15MB变成了872KB和725KB
继续我们来将ckeditor作为控件添加入visual studio中
建立一个ASP.NET Web Site。
将CKEditor文件夹复制到新建项目根目录下
default.aspx页下在Toolbox中右击鼠标弹出如下菜单:
选择Choose Items
确认后发现工具栏多了一个CKEditorControl的控件,这样就可以像其他asp.net的服务器控件一样使用了。
在aspx页中加入如下内容:
放在<%@ Page Laguage=..... %>的下一行,
<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>
尝试将一个CKEditor控件加入网页中运行,发现其仅支持图片flash资源的链接引用,无法实现资源的本地上传。
这时候就要用到CKFinder这个控件了。
CKFinder的配置
将CKFinder文件夹复制到新建项目根目录下
将刚才ckfinder中bin/Release文件夹下的CKFinder.DLL动态库添加入当前项目的Bin文
件夹下,如下图所示
将CKFinder集成入CKEditor环境下:
打开config,js源文件
修改CKEDITOR.editorConfig=function(config)如下:(已对一些功能进行了删改)
CKEDITOR.editorConfig = function( config )
{
config.skin='kama'//kama,v2,office2003,皮肤设置
config.language = 'zh-cn'; //设置中文环境
//config.uiColor = '#BFEE62'; //编辑器颜色设置
config.font_names = '宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;微软雅黑;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana'; //编辑字体设置
//功能设置
config.toolbar_Full =
[
[ '-', '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'],
['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
['Link', 'Unlink'],
['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],
'/',
['Styles', 'Format', 'Font', 'FontSize'],
['TextColor', 'BGColor'],
['Maximize', '-']
];
config.toolbar_Basic =
[
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink', '-', 'About']
];
//设置引用路径
config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html';
config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?Type=Images';
config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?Type=Flash';
config.filebrowserUploadUrl =
'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';
//设置编辑器长宽属性
config.filebrowserWindowWidth = '800';
config.filebrowserWindowHeight = '500';
};
在config.ascx中找到如下语句,更改为:
BaseUrl = "~/";//此处设置了打开服务器时默认访问目录为根目录
修改其中的CheckAuthentication函数为如下形式
public override bool CheckAuthentication()
{
return true;
}
好了,打开网页查看一下
好了,大功告成。