SpringBoot使用WangEditor富文本编辑器

最新推荐文章于 2025-09-19 11:56:13 发布

原创

最新推荐文章于 2025-09-19 11:56:13 发布 · 2.1k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#富文本 #前端

本文介绍如何使用开源的wangEditor富文本编辑器进行Web前端的文本编辑功能开发，包括基本的使用方法、前后端交互及自定义上传图片处理。

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%; ma