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

最新推荐文章于 2024-04-25 17:54:23 发布

大头目T

最新推荐文章于 2024-04-25 17:54:23 发布

阅读量788

点赞数

分类专栏：前端文章标签： java html

本文链接：https://blog.csdn.net/weixin_44315761/article/details/109242367

版权

前端专栏收录该内容

36 篇文章 0 订阅

订阅专栏

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.启动项目

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

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

在这里插入图片描述

大头目T

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
springboot整合百度Ueditor富文本编辑器

1.导入maven依赖 <dependency> <groupId>cn.jasonone.ueditor</groupId> <artifactId>ueditor-spring-boot-starter</artifactId> <version>1.2.0</version> </dependency>2.springboot启动
复制链接

扫一扫