SSM项目模块开发(竞赛使用)——Uediter

SSM项目模块开发(竞赛使用)——Uediter

十一月 05, 2020
1.写好访问路径：

B2Th60.md.png

2.新建控制器：uediterController.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@Controller
public class UediterController {
    
    //@Autowired
	//UediterService uediterService; //依赖注入但是暂时并不需要
    
	@RequestMapping(value="admin/uediter",method = RequestMethod.GET)//路径映射
    
	public ModelAndView studentManage() {
		ModelAndView model = new ModelAndView();
		model.setViewName("admin/student/uediterMain");
		return model;
	}
    
}
3.新建View: UediterMain.jsp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@page session="true"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="_csrf" content="${_csrf.token}"/>
    <meta name="_csrf_header" content="${_csrf.headerName}"/>
    <title>商城后台</title>
	<jsp:include page="../commonCss.jsp"/> 
</head>
<body class="blank">
<jsp:include page="../main/top.jsp"/> 
<jsp:include page="../main/left.jsp"/>
<jsp:include page="../commonJs.jsp"/> 
	<div id="wrapper">
	<div class="content animate-panel">	
	<!--<div class="small-header transition">
		    <div class="hpanel">
		        <div class="panel-body">
					<div class="row">
							<div class="hpanel">
								<div id="error_div" class="text-left"></div>
									顶部搜索
							</div>
						</div>
					</div>
				</div>	
		</div>-->
		<div class="row">
			<div class="col-lg-12">
				<div class="hpanel">
					<div class="panel-body">
						<h1>内容主体</h1>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>
3.引入Uediter

B2bkOP.md.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div class="row">
  <div class="col-lg-12">
    <div class="hpanel">
      <div class="panel-body">
        <div class="form-group col-lg-12">
          <label>内容</label>
          <script id="container" type="text/plain"></script>
          <!-- 配置文件 -->
          <script type="text/javascript"
            src="${pageContext.request.contextPath}/resources/admin/js/ueditor/ueditor.config.js"></script>
          <!--　编辑器源码文件 -->
          <script type="text/javascript"
            src="${pageContext.request.contextPath}/resources/admin/js/ueditor/ueditor.all.js"></script>
          <!--　实例化编辑器 -->
          <script type="text/javascript">
            var ue = UE.getEditor('container', {
              autoWidth: true
            });
            ue.ready(function () {
              ue.setContent($("#content").val());
            });
          </script>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
效果：

B2bWpd.png

一些核心有用的东西：

​ 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE HTML>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <title>ueditor demo</title>
</head>

<body>
    <!-- 加载编辑器的容器 -->
    <script id="container" name="content" type="text/plain">
        这里写你的初始化内容
    </script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="ueditor.all.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('container');
    </script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
var ue = UE.getContent();
//对编辑器的操作最好在编辑器ready之后再做
ue.ready(function() {
    //设置编辑器的内容
    ue.setContent('提交需要把contenter放到form表单里');
    //获取html内容，返回: <p>hello</p>
    var html = ue.getContent();
    //获取纯文本内容，返回: hello
    var txt = ue.getContentTxt();
});

常用方法 ：

实例化编辑器到id为 container 的 dom 容器上：详细
1
var ue = UE.getEditor('container');
设置编辑器内容：详细
1
2
3
ue.ready(function() {
    ue.setContent('<p>hello!</p>');
});
追加编辑器内容：详细
1
2
3
ue.ready(function() {
    ue.setContent('<p>new text</p>', true);
});
获取编辑器html内容：详细
1
2
3
ue.ready(function() {
    var html = ue.getContent();
});
获取纯文本内容：详细
1
ue.getContentTxt();
获取保留格式的文本内容：详细
1
ue.getPlainTxt();
获取纯文本内容：详细
1
ue.getContentTxt();
判断编辑器是否有内容：详细
1
ue.hasContents();

上传图片：

1.配置：

在Uediter.jsp中加入CSRF相关：

1
2
<input type="hidden" id="parameterName" value="${_csrf.parameterName}">
<input type="hidden" id="token" value="${_csrf.token}">

2.在js/uediter/jsp/config.json

1
2
3
4
5
6
7
8
9
10
11
12
{
	"imageActionName":"uploadimage",
    "imageFieldName": "upfile",
    "imageMaxSize": 2048000,
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
    "imageCompressEnable": true,
    "imageCompressBorder": 1600,
    "imageInsertAlign": "none", 
    "imageUrlPrefix": "http://localhost:8080/Shopping", /* 图片访问路径前缀 */
    "imagePathFormat": "/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

}

之后页面上就可以了：

BoUORU.md.png

​