这是国人编写的优秀轻巧的编辑器软件！唐山网络公司强烈推荐
下面阐述一下 ASP PHP JSP的使用方法：
分别测试了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]
这样后台插入的代码就可以显示高亮的效果了。
1，首先去官网下载http://www.kindsoft.net/
2，解压之后如图所示：
由于本人做的是用的是JSP，所以ASP,PHP什么的就用不上了，直接把那些去掉然后将整个文件夹扔进Myeclipse，如图：
里面有个报错，估计是我自己IDE的问题，没有处理照常使用。
3，就可以开工写JSP了，下面把自己的一个JSP的代码贴出来，页面代码神马的不太规范，凑合着当示例，能跑通就行;
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="css/layout.css">
<link rel="stylesheet" href="kindeditor/themes/default/default.css" />
<link rel="stylesheet" href="kindeditor/plugins/code/prettify.css" />
<script charset="utf-8" src="kindeditor/kindeditor.js">
</script>
<script charset="utf-8" src="kindeditor/lang/zh_CN.js">
</script>
<script charset="utf-8" src="kindeditor/plugins/code/prettify.js">
</script>
<script>
KindEditor.ready(function(K) {
var editor1 = K.create('textarea[name="article.content1"]', {
cssPath : 'kindeditor/plugins/code/prettify.css',
uploadJson : 'kindeditor/jsp/upload_json.jsp',
fileManagerJson : 'kindeditor/jsp/file_manager_json.jsp',
allowFileManager : true,
afterCreate : function() {
var self = this;
K.ctrl(document, 13, function() {
self.sync();
document.forms['example'].submit();
});
K.ctrl(self.edit.doc, 13, function() {
self.sync();
document.forms['example'].submit();
});
}
});
prettyPrint();
});
</script>
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="menu">
<ul>
<li>
<a href="main.jsp">首页</a>
</li>
<li>
<a href="jsp/update_password.jsp">个人信息</a>
</li>
<li>
<a href="jsp/article_add.jsp">提交论文</a>
</li>
<li>
<a href="article_returnList.action">审批论文</a>
</li>
<li>
<a href="#">后台管理</a>
</li>
</ul>
</div>
<div id="mainContent">
<form name="example" method="post" action="article_add.action">
题目：
<input type="text" name="article.title">
<br />
内容：
<textarea name="article.content1" cols="100" rows="8"
></textarea>
<br />
<input type="submit" name="button" value="提交" />
(提交快捷键: Ctrl + Enter)
</form>
</div>
<div id="footer">
Copyright 2012 by Lai Xuansi.
</div>
</div>
</body>
</html>