ssm使用富文本编辑器以及图片上传

jsp富文本编辑器下载地址：百度https://pan.baidu.com/s/10Qu12V6RCmRxCC-SEgFn5A

在开发中，我是用ssm+maven

大家可以排除其他，直接进入步骤即可

项目结构：

先前准备 :

把绿框中的jar包引用,右键包>Build Path>add

一、配置ueditor

1.把下载好的ueditor放到webapp目录下（如上图所示）

2.引用js脚本，以edit.jsp为例，引用如下示例

<script	src="${pageContext.request.contextPath}/ueditor/ueditor.config.js"></script>
<script src="${pageContext.request.contextPath}/ueditor/ueditor.all.js"></script>
<script	src="${pageContext.request.contextPath}/ueditor/lang/zh-cn/zh-cn.js"></script>

3.把富文本显示出来

（1）先写好显示的载体，写在你要显示出富文本编辑器的地方

<script id="editor" type="text/plain" name="remarks"></script>

这里的script可以用div代替

（2）示例化富文本编辑器

<script type="text/javascript">

		var ue = UE.getEditor('editor',{   
			   enterTag : 'br'
			});
</script>

到此为止，可以去看一下能不能显示了，以下附上示例：

<%@page import="com.model.DetailsTrem"%>
<%@page import="java.util.List"%>
<%@page import="com.model.Room"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta
	content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"
	name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>密码管理</title>

	<script
	src="${pageContext.request.contextPath}/ueditor/ueditor.config.js"></script>
<script src="${pageContext.request.contextPath}/ueditor/ueditor.all.js"></script>
<script
	src="${pageContext.request.contextPath}/ueditor/lang/zh-cn/zh-cn.js"></script>
</head>

<body>
						<script id="editor" type="text/plain" name="remarks"
						>
							</script>
	<script type="text/javascript">

		var ue = UE.getEditor('editor',{   
			   enterTag : 'br'
			});
	</script>

</body>

</html>

二、动态的富文本内容

<script id="editor" type="text/plain" name="remarks">数据库存储的富文本内容，把内容读取到这里</script>

三、多图片上传

未完待续

ssm使用富文本编辑器以及图片上传

先前准备 :

一、配置ueditor

二、动态的富文本内容

三、多图片上传

Guess you like