由于最近项目需要使用文本编辑器,在网上搜了一下,发现推荐KindEditor的比较多,再加上KindEditor的simple模式我很喜欢,所以就选择了KindEditor。官方的文档写的很清楚也很全面。我写这篇文章主要是当做自己的笔记 闲话不多说了 进入正题。
一、KindEditor官方地址
1、下载链接
http://kindeditor.net/down.php
2、演示地址
http://kindeditor.net/demo.php
二、KindEditor使用
1、将插件放入项目中
将以下红边框内的文件夹删除后,再将KindEditor文件夹放入项目中。
删除相应文件夹
添加到项目中
2、在JSP页面中使用插件
①引用的文件
<span style="white-space:pre"> </span><!--CSS文件-->
<link rel="stylesheet" href="resources/plugin/kindeditor/themes/default/default.css" />
<!--JS文件-->
<script type="text/javascript" src="resources/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="resources/plugin/kindeditor/kindeditor-min.js"></script>
<script type="text/javascript" src="resources/plugin/kindeditor/lang/zh_CN.js"></script>
②HTML元素
<body>
<!--由于绑定文本编辑器的textarea-->
<textarea id="content" name="content" style="width:700px;height:500px;visibility:hidden;"></textarea><br />
<input type="button" value="提交" οnclick="submit();" />
<!--由于显示编辑器提交后的内容-->
<div id="show" style="width: 700px;word-wrap: break-word;word-break: normal;"></div>
</body>
③JS脚本
<script type="text/javascript">
var editor;
KindEditor.ready(function(K) {
editor = K.create('textarea[name="content"]', {
resizeType : 1, //0不可更改大小;1可更改高度;2,可更改高度和宽度
allowPreviewEmoticons : false,
allowImageUpload : true,
items : [
'fontname', 'fontsize', '|',
'forecolor', 'hilitecolor', 'bold',
'italic', 'underline','removeformat',
'|', 'justifyleft', 'justifycenter',
'justifyright', 'insertorderedlist',
'insertunorderedlist', '|',
'emoticons', 'image', 'link', 'table']
});
});
function submit()
{
var html = editor.html();
//同步编辑器内容
editor.sync();
html = KindEditor('#content').val();
$("#show").html(html);
return false;
}
</script>
注意K.create('textarea[name="content"]'中name=“”中的名称和textarea的name保持一致
OK!现在你就可以在你的页面上看到KindEditor编辑器啦~~~
3、关于图片上传
万事俱备,只欠东风呀!既然用了这么个插件,不使用“插入图片”的功能,似乎有点说不过去呀!于是乎我测试了插入图片,可现实总是残酷的,屡试屡败,屡败屡试,终于在谷哥度娘的帮助下成功的插入了图片。
解决方法如下:
①修改image.js文件
找到image.js文件
修改image.js文件
②修改upload_json.jsp文件
上传图片使用的是官方提供的Jsp实例程序,在使用的过程中不要忘了将jsp --> lib文件夹下.jar包放入项目的lib库中。
找到upload_json.jsp 文件,将以下代码
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
upload.setHeaderEncoding("UTF-8");
List items = upload.parseRequest(request);
Iterator itr = items.iterator();
while (itr.hasNext()) {
FileItem item = (FileItem) itr.next();
String fileName = item.getName();
long fileSize = item.getSize();
if (!item.isFormField()) {
//检查文件大小
if(item.getSize() > maxSize){
out.println(getError("上传文件大小超过限制。"));
return;
}
//检查扩展名
String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
if(!Arrays.<String>asList(extMap.get(dirName).split(",")).contains(fileExt)){
out.println(getError("上传文件扩展名是不允许的扩展名。\n只允许" + extMap.get(dirName) + "格式。"));
return;
}
SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt;
try{
File uploadedFile = new File(savePath, newFileName);
item.write(uploadedFile);
}catch(Exception e){
out.println(getError("上传文件失败。"));
return;
}
JSONObject obj = new JSONObject();
obj.put("error", 0);
obj.put("url", saveUrl + newFileName);
out.println(obj.toJSONString());
}
}
替换为如下代码: (如果上传图片时,出现MultiPartRequestWrapper 转换异常,则不替换代码)
//Begin
MultiPartRequestWrapper wrapper = (MultiPartRequestWrapper) request;
//获得上传的文件名
String fileName = wrapper.getFileNames("imgFile")[0];//imgFile,imgFile,imgFile
//获得文件过滤器
File file = wrapper.getFiles("imgFile")[0];
//检查扩展名
String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
if(!Arrays.<String>asList(extMap.get(dirName).split(",")).contains(fileExt))
{
out.println(getError("上传文件扩展名是不允许的扩展名。\n只允许" + extMap.get(dirName) + "格式。"));
return;
}
//检查文件大小
if (file.length() > maxSize)
{
out.println(getError("上传文件大小超过限制。"));
return;
}
//重构上传图片的名称
SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
String newImgName = df.format(new Date()) + "_"
+ new Random().nextInt(1000) + "." + fileExt;
byte[] buffer = new byte[1024];
//获取文件输出流
FileOutputStream fos = new FileOutputStream(savePath +"/" + newImgName);
//System.out.println("########" + saveUrl + "@@"+ newImgName);
//获取内存中当前文件输入流
InputStream in = new FileInputStream(file);
try
{
int num = 0;
while ((num = in.read(buffer)) > 0)
{
fos.write(buffer, 0, num);
}
}
catch (Exception e)
{
e.printStackTrace(System.err);
} finally
{
in.close();
fos.close();
}
JSONObject obj = new JSONObject();
obj.put("error", 0);
obj.put("url", saveUrl + newImgName);
out.println(obj.toJSONString());
//End
大功告成,我们来看一下结果吧