SpringBoot使用WangEditor富文本编辑器

最新推荐文章于 2025-04-21 13:29:40 发布

silentkunden

最新推荐文章于 2025-04-21 13:29:40 发布

阅读量2.1k

点赞数 2

分类专栏： Spring Boot 文章标签：富文本前端

本文链接：https://blog.csdn.net/java_hzp/article/details/103979227

版权

Spring Boot 专栏收录该内容

6 篇文章

订阅专栏

wangEditor是基于javascript和css开发的 Web富文本编辑器，轻量、简洁、易用、开源免费。

若需要使用可以在wangEidtor官网上查看开发文档，或者去直接下载依赖包。

直接上前端代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>wangEditor demo</title>
<link rel="stylesheet" type="text/css"
	th:href="@{./layui/css/layui.css}">
<style type="text/css">
.toolbar {
	border: 1px solid #ccc;
	width: 50%;
	margin-top: 15px;
}

.text {
	border: 1px solid #ccc;
	height: 400px;
	width: 50%;
}
.layui-btn{
	margin-top: 20px;
}
.layui-form .layui-input{
	height: 50px;
	border-radius: 5px;
}

</style>
</head>
<body>
<form action="" class="layui-form" id="formid">
	<input type="text" name="title" lay-verify="title" autocomplete="off"
		placeholder="请输入标题" class="layui-input"
		style="width: 50%; margin-bottom: 15px;margin-top: 25px;" id="titleid">

	<div id="div1" class="toolbar"></div>
	<div style="padding: 5px 0; color: #ccc; width: 50%"></div>
	<div id="div2" class="text" placeholder="请输入标题" lay-verify="content">
		<!--可使用 min-height 实现编辑区域自动增加高度--0%>-->

	</div>
	<input type="text" name="type" lay-verify="type" autocomplete="off" required="required"
		placeholder="请输入类型" class="layui-input" id=typeid""
		style="width: 20%; margin-top: 15px;display: inline;">
	<input type="text" name="tag" lay-verify="tag" autocomplete="off" required="required"
		placeholder="请输入标签，空格分开" class="layui-input" id="tagid"
		style="width: 20%; margin-top: 15px;margin-left: 9%;display: inline;"><br>
	<button type="button" lay-submit="" class="layui-btn layui-btn-primary" id="btn2">立即发表</button>
	<button type="button" lay-submit="" class="layui-btn layui-btn-primary">保存草稿</button>
</form>
	<!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
	<script type="text/javascript"
		th:src="@{./wangEditor-3.1.1/release/wangEditor.min.js}"></script>
	<script type="text/javascript" th:src="@{./js/jquery-1.11.3.min.js}"></script>
	<script type="text/javascript" th:src="@{./layui/layui.js}"></script>
	<script type="text/javascript">
		var E = window.wangEditor
		var editor = new E('#div1', '#div2') // 两个参数也可以传入 elem 对象，class 选择器

		//开启debug模式
		editor.customConfig.debug = true;
		editor.customConfig.uploadFileName = 'myfile';
		editor.customConfig.uploadImgServer = 'article/upload';
		editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
		
		editor.customConfig.uploadImgMaxLength = 5
		editor.customConfig.uploadImgHooks = {
			    before: function (xhr, editor, files) {
			        // 图片上传之前触发
			        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
			        
			        // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
			        // return {
			        //     prevent: true,
			        //     msg: '放弃上传'
			        // }
			    },
			    success: function (xhr, editor, result) {
			        // 图片上传并返回结果，图片插入成功之后触发
			        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
			    	layer.msg('OK');
			    },
			    fail: function (xhr, editor, result) {
			        // 图片上传并返回结果，但图片插入错误时触发
			        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
			    },
			    error: function (xhr, editor) {
			        // 图片上传出错时触发
			        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
			    },
			    timeout: function (xhr, editor) {
			        // 图片上传超时时触发
			        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
			    	layer.msg('响应超时');
			    },

			    // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
			    // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
			    customInsert: function (insertImg, result, editor) {
			        // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
			        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
			        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
			        var url = result.data
			        alert(url)
			        insertImg(url)

			        // result 必须是一个 JSON 格式字符串！！！否则报错
			    }
			    
			}
		editor.create()
		
    	$(".layui-form .layui-input").click(function(){
    		$(this).css("border-left","5px #009688 solid");
    	}).focusout(function(){
    		$(this).css("border-left","1px solid #e6e6e6");
    	});
	    layui.use(['form', 'layedit', 'laydate'], function(){
		  var form = layui.form
		  ,layer = layui.layer
		  ,layedit = layui.layedit
		  ,laydate = layui.laydate;
		  form.verify({
			    title: function(value){
			      if(value.length==0){
			        return '标题不能为空啊';
			      }else if(value.length<5){
			        return '标题不能小于5个字符啊';
			      }
			    },
			    type: function(value){
			      if(value.length==0){
			        return '类型不能为空啊';
			      }else if(value.length>10){
			        return '类型不能大于10个字符啊';
			      }
			    },
			    tag: function(value){
			      if(value.length==0){
			        return '标签不能为空啊';
			      }else if(value.length>5){
			        return '标签不能大于5个字符啊';
			      }
			    },
			    content: function(value){
			      if(editor.txt.text()==0){
			        return '文章内容不能为空啊';
			      }
			    },
		  });
		  document.getElementById('btn2').addEventListener('click', function () {
		        // 读取 text
		        // alert(editor.txt.html())
		        $.ajax({
		        	url: "article/write",
		        	data: $("#formid").serialize()+"&content="+editor.txt.html(),
		        	type: "get",
		        	success:function(result){
		        		layer.alert('发表成功',
								{title:'成功提示'});
		        	}
		        })
		        
		    }, false)
	    });
	</script>
</body>
</html>

没有很花心思地写样式什么的，就是简单的使用，效果图就一般般吧！

最后，在前后端交互方面，wangEditor要求返回值的json格式要求，在此自编写了一个bean作为返回对象，转成json对象就即可符合要求了：


import java.util.Arrays;

public class WangEditor {
	
	private Integer errno; //错误代码，0 表示没有错误。
	private String[] data; //已上传的图片路径
	
	public WangEditor() {
		super();
	}
	public WangEditor(String[] data) {
		super();
		this.errno = 0;
		this.data = data;
	}
	public Integer getErrno() {
		return errno;
	}
	public void setErrno(Integer errno) {
		this.errno = errno;
	}
	public String[] getData() {
		return data;
	}
	public void setData(String[] data) {
		this.data = data;
	}
	@Override
	public String toString() {
		return "WangEditor [errno=" + errno + ", data=" + Arrays.toString(data)
				+ "]";
	}
	

}

在controller中直接获取内容，操作成功以后，把WangEditor对象返回即可。

@RequestMapping(value="/upload" , method = RequestMethod.POST)
	public WangEditor uploadSource(@RequestParam("myfile") MultipartFile file , HttpServletRequest request) {
		System.out.println(file);
		String pathString = null;		
		//设置图片上传路径
		String url = request.getSession().getServletContext().getRealPath("/upload");
		String path = null;
		if(file!=null) {
			path = new SimpleDateFormat("yyyyMMddHHmmss").format(new Date()) + "_" +file.getOriginalFilename();
			pathString = url+"/"+path;
		}
		WangEditor we = null;
		try {
			File files=new File(pathString);
            //打印查看上传路径
            System.out.println(pathString);
            if(!files.getParentFile().exists()){
                files.getParentFile().mkdirs();
            }
			file.transferTo(files);
			String[] str = { "/upload/"+path };
			we = new WangEditor(str);
			
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
			log.error("上传文件失败", e);
		} 	
		return we;
	}