使用KindEditor

学习内容：

使用KindEditor，富文本对应数据库为Clob型，但是可以用String来接收和传输

学习产出：

html引用主键

<textarea id="infovalue" name="infovalue" style="width:96%;height:400px;">${model.infovalue}
				</textarea>

js初始化

KindEditor.ready(function(K) {
			window.editor = K.create('#infovalue',{
				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',
					'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'pagebreak',
					'anchor', 'link', 'unlink', '|', 'about'
				],
				allowImageUpload:true,//允许上传图片
				allowFileManager:true,
				allowPreviewEmoticons : true,
				uploadJson: '<%=basePath %>js/kingEditor/upload_json.jsp',//富文本框图片上传
				afterUpload: function(){this.sync();}, //图片上传后，将上传内容同步到textarea中
				afterBlur: function(){this.sync();},//解决表单通过ajax请求提交造成的提交不到后台的问题,
				afterChange : function() {
					$("#num").val(this.count('text'));//this.count()可以获取文本字数
				}
			});
			});

上传的图片会保存到本地文件
需要在kindEditor文件中更改默认地址

//文件保存目录路径
//String savePath = pageContext.getServletContext().getRealPath("/") + "attached/";
	String savePath = ConfigManager.getAttatchmentsPath()+"bgsnotice/";

//文件保存目录URL
//String saveUrl  = request.getContextPath() + "/attached/";
	String saveUrl = basePath+"bgsnotice/getImage.xhtml?url=";

图片回显的时候需要调用方法

@RequestMapping("/getImage")
	public void getImage(HttpServletRequest request, HttpServletResponse response)throws IOException{
		String url = request.getParameter("url");
		String allUrl = ConfigManager.getAttatchmentsPath()+"bgsnotice/"+url;
		File file = new File(allUrl);
		InputStream in = new FileInputStream(file);
		OutputStream outputStream = new BufferedOutputStream(response.getOutputStream());
		//创建存放文件内容的数组
		byte[] buff =new byte[1024];
		//所读取的内容使用n来接收
		int n;
		//当没有读取完时,继续读取,循环
		while((n=
				in.read(buff))!=-1){
			//将字节数组的数据全部写入到输出流中
			outputStream.write(buff,0,n);
		}
		//强制将缓存区的数据进行输出
		outputStream.flush();
		//关流
		outputStream.close();
		in.close();

	}

注意：其中图片是以请求的方式写入数据库中的，不能直接回显