KindEditor4.x 文本编辑器的使用及图片上传失败的解决办法

最新推荐文章于 2019-11-29 11:12:03 发布

xuhu_it

最新推荐文章于 2019-11-29 11:12:03 发布

阅读量2.5k

点赞数

分类专栏：插件文章标签：文本编辑 KindEditor Kindeditor图片上传失败

本文链接：https://blog.csdn.net/xuhu_it/article/details/19826437

版权

插件专栏收录该内容

2 篇文章 0 订阅

订阅专栏

由于最近项目需要使用文本编辑器，在网上搜了一下，发现推荐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

大功告成，我们来看一下结果吧

以上代码如果不进行替换，则图片一直上传失败。涉及到的图片保存路径请大家按需修改！我也是通过谷歌度娘解决的问题，感谢那些无名英雄吐舌头

xuhu_it

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
KindEditor4.x 文本编辑器的使用及图片上传失败的解决办法

我在网上搜了一下，发现推荐KindEditor的比较多，再加上KindEditor的simple模式我很喜欢，所以就选择了KindEditor。官方的文档写的很清楚也很全面。我写这篇文章主要是当做自己的笔记闲话不多说了进入正题。一、KindEditor官方地址1、下载链接http://kindeditor.net/down.php2、演示地址http://kindedi
复制链接

扫一扫