首发http://www.81sec.com/archives/26.htm
附件在首发网站中,有需要自行下载。
最近做web网站在找编辑器的时候在选择编辑器,分别测试了fckeditor和kindeditor这两款,下面做一个简单的说明:
[1].fckeditor编辑器对于从word复制过来的格式会乱掉,另外考虑其自身的安全问题,就没用它了
[2].kindeditor则是js+html的编辑器,当然另外如果你加入图片上传功能就要提供php或asp的脚本
[3].比较遗憾的是kindeditor只能传图片,其他附件无法上传,不过如果加入这个功能也不难,可以参考image上传来编写
因此本次的重点就是讲解kindeditor的使用,刚好这次同时使用了asp和php编写,因此两个都会分享。<!--more-->
1.ASP版KindEditor3.5.2使用方法及常见问题
使用的时候可以参考原版里面的asp/demo.asp来操作,这里要重点说明是关于调用编辑器代码:
[javascript]
<script type="text/javascript" charset="utf-8" src="../keditor/kindeditor.js"></script>
<script type="text/javascript">
KE.show({
id : 'content',
// 这个是相对于/plugins/image目录而言,一般保持默认即可
imageUploadJson : '../../asp/upload_json.asp',
fileManagerJson : '../../asp/file_manager_json.asp',// 同上
allowFileManager : true,
afterCreate : function(id) {
KE.event.ctrl(document, 13, function() {
KE.util.setData(id);
document.forms['editForm'].submit();
});
KE.event.ctrl(KE.g[id].iframeDoc, 13, function() {
KE.util.setData(id);
document.forms['editForm'].submit();
});
}
});
</script>
[/javascript]
在asp要调用编辑器比较常见问题是图片上传问题,我说下我这个编辑器的配置目录问题
(1).编辑器在根目录,而我调用编辑器是后台文章编辑,如下方式:
|--keditor # 放在根目录防止爆后台路径
|--admin/newedit.asp
|--upload #上传目录放在根目录防止暴露后台地址
(2).在asp的2个上传文件
keditor\asp\file_manager_json.asp # 图片浏览
在该文件中,涉及到上传目录的设置问题,代码如下:
[vb]
rootPath = "/upload/"
rootUrl = "../upload/"
[/vb]
keditor\asp\upload_json.asp # 图片上传
在该文件中,涉及到上传目录的设置问题,代码如下:
[vb]
'文件保存目录路径
savePath = "/upload/"
'文件保存目录URL
saveUrl = "../upload/"
[/vb]
(3)同时在编辑器中加入插入代码的功能,具体不详说,查看附件代码
这样子设置完目录的结构就不会出现"服务器出现故障"的提示,出现这个提示一般可能有以下几种情况:
(1).上传目录设置问题
(2).从官方下载的版本默认是utf-8格式,如果用到gbk中可能会出现这个错误提示
(3).程序本身出错(没有修改程序是不会这个问题!)
<a href='http://www.81sec.com/wp-content/uploads/2011/03/keditor.zip'>点我下载:keditor 3.5.2 for asp Modify by 冷锋</a>
2.PHP版KindEditor3.5.2使用方法及常见问题
PHP版的和ASP原理差不多就是在目录设置有点不一样,注意下就可以了,就不多说,只说下目录结构:
|--keditor # 更目录
|--keditor/attached # 上传目录
|--system/newedit.php # 调用编辑器页面目录在后台
目录设置常见keditor/php目录下两个php文件,建议不要调整目录结构。我是先调试的PHP版通过了,可是后面我按PHP结构目录设置
发现不行,于是就另外调试了一种方法。
以上所说两个版本在后台上传后能够直接插入到编辑器中预览,在前台和后台均可正常显示图片。当然对于上传附件你可以直接添加允许上传的文件扩展名即可上传附件。
<a href='http://www.81sec.com/wp-content/uploads/2011/03/keditor-for-php.zip'>点我下载:keditor 3.5.2 for php Modify by 冷锋</a>
插入代码功能需配合syntax使用,前台包含文章页面调用如下代码:
[javascript]
<script type="text/javascript" src="syntax/scripts/shCore.js"></script>
<script type="text/javascript" src="syntax/scripts/shLegacy.js"></script>
<script type="text/javascript" src="syntax/scripts/shBrushAll.js"></script>
<link type="text/css" rel="stylesheet" href="syntax/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="syntax/styles/shThemeDefault.css"/>
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = 'syntax/scripts/clipboard.swf';
SyntaxHighlighter.all();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
[/javascript]
这样后台插入的代码就可以显示高亮的效果了。
小提示:如果出现"服务器故障"的错误,就通过firefox的firebug插件来调试,查看joson的返回值。有不清楚或者不懂的请留言。