kindeditor必须掌握的web开发技术
最近在完善自己的班级网站，在开发后台新闻发布系统的时候，编写新闻时运用到了kindeditor编辑器，这是一款不错的开源在线编辑器。
以前老是觉得的在网页中嵌入编辑器是一件非常难的web技术，到现在才发现一切都是纸老虎。只要你自己肯专研，没有什么技术是难点。
我的班级网站很简单，jsp+mysql完成。采用myeclipse集成开发环境，方便简单。
现在最新的kindeditor的下载主页是http://www.kindsoft.net/
好了，现在就以我的实际案例来教大家使用kindeditor吧。
1.下载kindeditor资源包，解压为如下![]()
。
2.把他放到你的项目中，例如这里![]()
这里就是WebRoot里面， 我把kindeditor-v4.0.3文件名称改成了editor 。
3.关于kindeditor-v4.0.3理由那些文件有什么作用，大家可以百度。还是说明一下![]()
asp asp.net 是使用asp 使用kindeditor的例子。Php 是php使用的例子。Jsp 就是jsp使用的例子。Example是展示kindeditor一些功能的例子。在实际中，可以把他们都除删掉。
以前老是觉得的在网页中嵌入编辑器是一件非常难的web技术，到现在才发现一切都是纸老虎。只要你自己肯专研，没有什么技术是难点。
我的班级网站很简单，jsp+mysql完成。采用myeclipse集成开发环境，方便简单。
现在最新的kindeditor的下载主页是http://www.kindsoft.net/
好了，现在就以我的实际案例来教大家使用kindeditor吧。
1.下载kindeditor资源包，解压为如下
2.把他放到你的项目中，例如这里
这里就是WebRoot里面， 我把kindeditor-v4.0.3文件名称改成了editor 。
3.关于kindeditor-v4.0.3理由那些文件有什么作用，大家可以百度。还是说明一下
asp asp.net 是使用asp 使用kindeditor的例子。Php 是php使用的例子。Jsp 就是jsp使用的例子。Example是展示kindeditor一些功能的例子。在实际中，可以把他们都除删掉。
其他的必须保留，lang文件夹中是一些语言相关的js文件。Plugins是插件文件夹，例如显示视频，显示图片的必须文件。Themes是kindeditor皮肤文件夹。Kindeitor.js和kindeditor-min.js则是要在页面中调用的js文件，它们负责显示编辑框。
4.
看我的editor中保留的文件吧，
![]()
是吧，很多都删除了。
Jsp中的这些
![]()
文件是必须的。是上传功能的页面。
5.
admin文件夹是我后台新闻发布系统。
![]()
addnew.jsp是添加新闻页面，这么就要使用kindedtior进行编辑文字。
代码如下：<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>编辑新闻</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="images/acss.css">
<link rel="stylesheet" href="../themes/default/default.css" /> //这里注意文件的层次，../web开发的都应明白什么意思
<link rel="stylesheet" href="../plugins/code/prettify.css" /> //这里是kindeditor显示的css
</head>
<script charset="utf-8" src="../editor/kindeditor.js"></script> //这里调用了js。注意文件名字和层次
<script charset="utf-8" src="../editor/lang/zh_CN.js"></script> //看吧，CN表示使用中文版
<script>
var editor;
KindEditor.ready(function(K) {
editor = K.create('#
editor_id'
);
});
</script>
<script language="javaScript">
function check()
{
if(myform.title.value=="")
{
alert("请输入新闻的标题！");
return false;
}
if(myform.content.value=="")
{
alert("请输入新闻的内容！");
return false;
}
if(myform.author.value=="")
{
alert("请输入新闻的作者！");
return false;
}
}
</script>
<body>
<center>
<h2>编辑新闻</h2>
<div align="right"><font size="2"><a href="edits_all.jsp">返回管理页面</a></font></div>
<hr>
<form name="myform" method="post" action="../AddNewServlet" onSubmit="return check()">
<table border="1" background="#ffffec" width="70%">
<tr bgcolor="#f7f7f7">
<td width=10%>标题：</td>
<td><input type="text" name="title" size="65%" ></td>
<tr bgcolor="#f7f7f7">
<td width=10%>类型：</td>
<td>
<select name="type">
<option value="xw" selected>新闻</option>
<option value="sh">生活部</option>
<option value="xx">学习部</option>
<option value="ls">老师寄语</option>
<option value="xc">宣传部</option>
<option value="zz">组织部</option>
<option value="jj">纪检部</option>
<option value="qg">勤工助学</option>
</select>
</td>
<tr bgcolor="#f7f7f7">
<td>内容：</td>
<td>
<textarea id="
editor_id
" name="content" style="width:700px;height:300px;">
</textarea>
</td>
<tr bgcolor="#f7f7f7">
<td>作者：</td>
<td><input type="text" name="author" size="65%"></td>
<tr bgcolor="#f7f7f7">
<td colspan="2" align="center">
<input type="submit" value="提交">
<input type="reset" value="清空">
</td>
</table>
</form>
</center>
</body>
</html>
这样就能在页面中显示 kindeditor编译器了
好了，以前认为的牛逼在线编译器技术，现在也就这么简单。
当然，我现在也只是初步的使用。如何上传图片，视频，我还没有完成。关于更多kindeditor的知识，到
http://www.kindsoft.net/
官方网看，那里有很多API，细致的问题要自己研究。
不会用在线编译器的web开发者，赶紧来学习吧。好的话，顶一下。有什么问题留言。