老牌编辑器FCK的升级版CKEditor经过重写,提
供了丰富而强大的集成和互动的API。
新版编辑器是完全基于插件,它可以扩展所有部件以符合需求。
FCKeditor升级后的CKEditor去掉了上传功能,只提供了基本的文本编辑功能,上传模块由另一个组件CKFinder来实现。
换句话说编辑器如果需要上传功能,就需要再下载CKFinder(http://www.ckfinder.com/)。
CKEditor + CKFinder 配置流水账:
CKEditor:
1.解压CKEditor到webRoot目录,在应用页面加载其ckeditor.js ;
2.页面textarea:
[html]<textarea cols=”80″; name=”editor1″ rows=”10″></textarea>;[/html]
CKFinder:
3.解压CKFinder到webRoot目录(最好与CKEditor同级),在应用页面加载其ckfinder.js ;
4.页面script:(最好textarea之后)
[javascript]
if (typeof CKEDITOR == ‘undefined’) {
document.write(’加载CKEditor失败’);
}
else {
var editor = CKEDITOR.replace(’editor1′);
CKFinder.SetupCKEditor(editor, ‘../ckeditor/ckfinder/’); //ckfinder总目录的相对路径.
}
[/javascript]
整合:
(把俩js加载到同一文件其实就已经基本整合好了,还需要修改的配置如下)
5.打开\ckfinder\config.php,修改$baseUrl = ‘(上传附件的存放路径)’; //以webRoot为起始的绝对路径,其目录下会自动生成images、flash等子目录;默认是在webRoot的根目录下,注意修改。
至此配置完毕,如果需要自定义界面,可进行以下的高级修改:
6.在ckeditor\config.js中的CKEDITOR.editorConfig里加入以下需要自定义的配置代码:
[css]
//字体.
config.font_names = ‘宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;微软雅黑;Arial;
Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana;’ ;
//工具按钮.
config.toolbar=
[
['Source','-','Save','NewPage','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'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar',
'PageBreak'],
‘/’,
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
['Maximize','ShowBlocks','-','About']
];
//宽度
config.width = 500;
//高度
config.height = 400;
//皮肤
config.skin=’v2′;
//等等… …
[/css]
经过两天的摸索,终于搞定ckfinder的上传功能,特整理了实现的详细过程和大家分享下.
本人机器系统 windowsxp sp3
开发环境:vs2005 sql2000and2005 没有安装iis
已经调试安装好了ckeditor3.0 , 下一步 我们来集成ckfinder 实现图片或者flash的上传功能。
CKEditor 不具备上传功能,需要集成 CKFinder 才能实现上传功能。
CKFinder 1.4.1.1 与 CKEditor 3.0.1 进行集成的配置方法:
官方网站:CKFinder(powerful and easy to use Ajax file manager for web browsers)
下载地址:CKFinder 1.4.1.1 for Asp.net(updated 02.10.2009)
1.下载 ckfinder_aspnet_1.4.1.1.zip 解压后将ckfinder(放在根目录下)。我的是开发网站的根目录,在根目录下同时还有ckeditor这个文件夹。
2.拷贝ckfinder的bin目录下的CKFinder.dll到vs2005的bin目录下
3.打开 " \ckfinder\config.ascx ",找到BaseUrl,可以看到BaseUrl = "/ckfinder/userfiles/";将其为BaseUrl = "~/ckfinder/userfiles/";
// 注意“~”
// 以 userfiles 为默认路径,其目录下会自动生成images、flash等子目录。
4、在 ckeditor/config.js 中集成 ckfinder。将以下代码复制到config.js中即可
// 自定义 CKEditor 样式
CKEDITOR.editorConfig = function(config) {
……
CKFinder.SetupCKEditor(null, '../ckfinder/');// 在 CKEditor 中集成 CKFinder,注意 ckfinder 的路径选择要正确。
}
5、在 aspx 页面或者 master 模板页 <head> 标签中载入 ckfinder.js:
<!-- 载入 CKFinder JS 文件 -->
<script src="../ckfinder/ckfinder.js" type="text/javascript"></script>
<!-- 使用 ckeditor 必须定义 class="ckeditor" -->
本人新闻发布界面部分代码:
<head runat="server">
<title>新闻发布</title>
<script language="javascript" type="text/javascript" src="../ckeditor/ckeditor.js"></script>
<script language="javascript" type="text/javascript" src="../ckfinder/ckfinder.js" ></script>
</head>
本人用的是textarea控件 ,textbox也可以,自行研究~!
在<body>标签中使用ckfinder:
<textarea id="text1" name="editor1" class="ckeditor" runat="server" rows="10" style="width: 640px" ></textarea>
<script language="javascript" type="text/javascript" >
CKEDITOR.replace( 'editor1',
{
filebrowserBrowseUrl : '/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : '/ckfinder/ckfinder.html?Type=Images',
filebrowserFlashBrowseUrl : '/ckfinder/ckfinder.html?Type=Flash',
filebrowserUploadUrl : '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'
}
);
</script>
注意:绿色的代码错误会导致上传文件时候一点击浏览服务器就产生乱码!
常见错误排除方法:
症状:因为安全原因,文件不可浏览。请联系系统管理员并检查CKFinder配置文件。
原因:未设置用户身份验证或者用户未登录
解决办法
到config.ascx中找到如下语句
语句:
public override bool CheckAuthentication()
{
reture false;
}
更改为:
语句:
public override bool CheckAuthentication()
{
reture true;
}
这样可以去掉身份验证,这样设置从安全性考虑并不好,但是我的目的是先调试能用!
症状:未知错误
原因:设置不进行用户身份验证,但是 BaseUrl 路径不对。
解决办法 检查BaseUrl是否修改为BaseUrl = "~/ckfinder/userfiles/";
参考:http://hi.baidu.com/%B4%F3%CE%B0/blog/item/5f9ead517faadf858c543087.html
http://blog.csdn.net/ishowing/archive/2009/09/24/4589950.aspx
http://www.cnblogs.com/hudonglin/archive/2009/09/11/1564568.html
http://docs.cksource.com/CKFinder/Developers_Guide/ASP.NET/CKEditor_Integration
官方文档:
http://docs.cksource.com/CKEditor_3.x/Developers_Guide
http://docs.cksource.com/CKFinder/Developers_Guide