富文本kindeditor

最新推荐文章于 2023-03-10 10:11:49 发布

sunhuwh

最新推荐文章于 2023-03-10 10:11:49 发布

阅读量1.1k

点赞数

分类专栏： E-learning # Jsp 文章标签： kindeditor 富文本 request.getContextPa 路径

本文链接：https://blog.csdn.net/sunhuwh/article/details/26250683

版权

E-learning 同时被 2 个专栏收录

189 篇文章 0 订阅

订阅专栏

Jsp

41 篇文章 0 订阅

订阅专栏

kindeditor来做富文本。

springmvc+kindeditor

以前也用过，但是没有很清楚的了解kindeditor的适用方法，今天花了大量时间弄它。

首先，kindeditor能够帮助我们实现富文本的操作。

他怎么实现的呢？

看下例子就可以知道，比方说example中的simple.html:

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Simple Examples</title>
		<style>
			form {
				margin: 0;
			}
			textarea {
				display: block;
			}
		</style>
		<link rel="stylesheet" href="../themes/default/default.css" />
		<script charset="utf-8" src="../kindeditor-min.js"></script>
		<script charset="utf-8" src="../lang/zh_CN.js"></script>
		<script>
			var editor;
			KindEditor.ready(function(K) {
				editor = K.create('textarea[name="content"]', {
					resizeType : 1,
					allowPreviewEmoticons : false,
					allowImageUpload : false,
					items : [
						'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
						'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
						'insertunorderedlist', '|', 'emoticons', 'image', 'link']
				});
			});
		</script>
	</head>
	<body>
		<h3>默认模式</h3>
		<form>
			<textarea name="content" style="width:700px;height:200px;visibility:hidden;">KindEditor</textarea>
		</form>
	</body>
</html>

首先先把改用的js加载进去：

<link rel="stylesheet" href="../themes/default/default.css" />
		<script charset="utf-8" src="../kindeditor-min.js"></script>
		<script charset="utf-8" src="../lang/zh_CN.js"></script>

然后再确定哪个textarea需要设置为富文本：

<textarea id="content" name="content" style="width:700px;height:300px;"></textarea>

是这个。然后就进行设置：

<script>
			var editor;
			KindEditor.ready(function(K) {
				editor = K.create('textarea[name="content"]', {
					resizeType : 1,
					allowPreviewEmoticons : false,
					allowImageUpload : false,
					items : [
						'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
						'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
						'insertunorderedlist', '|', 'emoticons', 'image', 'link']
				});
			});
		</script>

就是这么个流程，这只是最基础的。而如果复杂一点，要将图片上传到某个地方，并且自动插入到textarea标签中，怎么做呢？

在前面我做过一个图片、视频上传的一个功能:图片上传。这里就需要用到它。

先来处理上传位置的问题：

upload_json.jsp中：

//文件保存目录路径
String savePath = pageContext.getServletContext().getRealPath("/") + "attached/";
//文件保存目录URL
String saveUrl  = request.getContextPath() + "/attached/";

将其改下路劲就行，我这里改成的是绝对路径。"D:/upload/"。两个都改成这。

接下来解决插入图片：

在没有改变的时候，会报错，通过火狐可以看具体路径。

仔细看upload_json.jsp，会发现有个url，obj.put("url", saveUrl+newFileName);

JSONObject设置了url，就会运行该url对应的方法。我是这样设置的：

String path = request.getContextPath();
		String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
		String picturePath = basePath+"/comment/getImage?path="+saveUrl + newFileName;
		obj.put("url", picturePath);

然后匹配url：

@RequestMapping(value = "/getImage",params = {"path"},method = RequestMethod.GET)
    public void getImage(HttpServletResponse response,String path) throws IOException {
        File file = new File(path);
        commentService.getImage(file, response);
    }

@Override
	public void getImage(File file,HttpServletResponse response) throws IOException {
        
        FileInputStream inputStream = new FileInputStream(file);
        byte[] data = new byte[(int)file.length()];
        inputStream.read(data);
        inputStream.close();
        
        String[] f =  file.getPath().split("\\.");
        String contentType = f[f.length-1].toLowerCase();
        //contentType = MIMEPropertiesReader.getProperty(contentType);
        response.setContentType(contentType);
        
        OutputStream stream = response.getOutputStream();
        stream.write(data);
        stream.flush();
        stream.close();
    }

这样就整个完成了

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

path IS: /jspSmartUpLoad

basePath IS: http://yangm1203.oicp.net:8080/jspSmartUpLoad/

request.getScheme() IS: http

request.getServerName() IS: yangm1203.oicp.net

request.getServerPort() IS: 8080