kindeditor-在线编辑器

写在前面的话：

今天是第一次写博客，很值得纪念，希望能够和大神们一起交流技术，一起进步。。。来自<一只有梦想的前端小白>

最近项目中需要实现图文混排的效果，所以研究了下在线编辑器-- kindeditor，在此之前也有研究过百度的在线编辑器--ueditor，但是百度的在线编辑器ueditor较 kindeditor 大10倍左右，所以综合一些原因最终选择使用kindeditor。下面分享下kindeditor在java项目中的配置以及运行结果：

1、去官网 http://kindeditor.net/down.php 下载 KindEditor 4.1.11 (2016-03-31) [1143KB]

2、本文以jsp版本为例，将下载下来的文件夹删除asp，asp.net，php文件夹，如图所示

3、将文件夹放入eclipse下的项目中，如图所示(图中我的kindedtior 文件夹根据自己的自己的需要稍作了修改)

4、需要把jsp下面lib下的三个包，如图所示：

拷进项目的lib下面，并且要引进去，如图所示：

5、如上图所示，我的kindedtior 文件夹里面新建了一个kindeudtior.html页面，其代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="themes/simple/simple.css"/>
	</head>
<body>
<form name="example" method="post" action="http://localhost:8080/personalWebsiteFront/studentInfo/addNewInfo">
		<textarea id="editor_id1" name="textInfo" style="width:700px;height:300px;">
		</textarea>
		<input type="submit" name="button" value="提交内容" /> (提交快捷键: Ctrl + Enter)
</form>
<script charset="utf-8" src="kindeditor-all.js"></script>
<script charset="utf-8" src="lang/zh-CN.js"></script>
<script charset="utf-8" src="js/jquery-1.11.2.min.js"></script>
<script>
        KindEditor.ready(function(K) {
    		// 实例化编辑器1
            editor1 = K.create('#editor_id1',{
            uploadJson : 'jsp/upload_json.jsp',
			fileManagerJson : 'jsp/file_manager_json.jsp',
			allowFileManager : true,   //否开启【浏览服务器】功能
			items:['source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
					'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
					'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
					'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
					'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
					'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
					'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
					'anchor', 'link', 'unlink', '|', 'about'
			],themeType : 'simple',
            });
    });
</script>
</body>
</html>

　如上述代码所示，我配置了服务器，此处省略。。。

6、到这一步时，如果启动tomcat运行项目是可以成功的，但是在插入图片或者文件时是会出错的，这是因为文件的保存路径的问题。下面我们需要修改jsp文件夹下面的upload_json.jsp文件，如图所示：