springboot整合百度Ueditor富文本编辑器

标签: 富文本编辑器  java  html

1.导入maven依赖

<!-- 百度富文本编辑器 -->
		<dependency>
			<groupId>cn.jasonone.ueditor</groupId>
			<artifactId>ueditor-spring-boot-starter</artifactId>
			<version>1.2.0</version>
		</dependency>

2.springboot启动类添加注解@EnableUeditor

@SpringBootApplication
@MapperScan("com.greewon.mapper")
@EnableUeditor//启动百度富文本编辑器
@EnableScheduling//定时任务注解
public class App extends SpringBootServletInitializer {
	@Override
	protected SpringApplicationBuilder configure(SpringApplicationBuilder builder) {
		return builder.sources(App.class);
	}
	
	public static void main(String[] args) {
		SpringApplication.run(App.class, args);
	}
}

3.下载Ueditor富文本编辑器相关文件
1.)官网下载
2.) 我的配置

4.复制Ueditor文件到resources目录下
在这里插入图片描述
5.html页面导入相关js文件,初始化编辑器

<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/ueditor/lang/zh-cn/zh-cn.js"></script>

<!DOCTYPE HTML>
<html>
<head>

<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/ueditor/lang/zh-cn/zh-cn.js"></script>

</head>
<body>

	<form class="form-horizontal" action="lyear_forms_elements.html" method="post"
		onsubmit="return false;">
		<div class="form-group">
			<label>文章标题:</label> <input class="form-control input-lg" type="text" placeholder="请输入文章标题...">
		</div>
		<div class="form-group">
			<label>文章内容:</label>
			<script id="editor" type="text/plain" style="width: 100%; height: 500px;"></script>
		</div>
		<div align="center">
			<button class="btn btn-success btn-lg" type="button">提交</button>
		</div>
	</form>
	<script type="text/javascript">
		//实例化编辑器
		UE.getEditor('editor');
	</script>

</body>
</html>

6.启动项目

图片上传路径
在这里插入图片描述
上传后,图片访问路径

在这里插入图片描述
这里我们调用的是富文本编辑器自带的默认访问路径

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

版权声明:本文为weixin_44315761原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44315761/article/details/109242367