springboot整合ueditor百度富文本编辑器详细教程

最新推荐文章于 2024-03-31 03:01:48 发布

qq_43737121

最新推荐文章于 2024-03-31 03:01:48 发布

阅读量762

点赞数 1

文章标签： spring boot 百度 intellij-idea

本文链接：https://blog.csdn.net/qq_43737121/article/details/120873547

版权

第一步：到官方下载ueditor
https://ueditor.baidu.com/website/download.html（ueditor下载地址）

解压，放到项目目录static下
在这里插入图片描述

第二步：引入到前端页面中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/admin/ueditor/ueditor.config.js"></script>
    <script src="/admin/ueditor/ueditor.all.min.js"></script>
    <script src="/admin/ueditor/lang/zh-cn/zh-cn.js"></script>
    <script src="/ueditor/ueditor.all.js"></script>
</head>
<body>
<textarea name="content" id="content" style="min-height: 500px"></textarea>
</body>
<script type="text/javascript">
    UE.getEditor('content');

</script>
</html>

效果，图片展示用了自己项目的图片
在这里插入图片描述

第三步：修改源代码，因为官方提供的是JSP，所以引入之后图片上传等一些功能无法使用：注意了以下每一步都是重点
1.修改ueditor.config.js，防止大家懒得自己写，给大家贴一下代码
var server_url = window.location.protocol+"//"+window.location.hostname+":"+window.location.port
serverUrl: server_url+"/config"

在这里插入图片描述

修改后
在这里插入图片描述

2.新增一个ServerController（一定要单独建一个，不要在其他Controller里写）
在这里插入图片描述
代码：

@Controller
public class ServerController {
    @RequestMapping(value = "/config")
    public void config(HttpServletRequest request, HttpServletResponse response) {
        response.setContentType("application/json");
        String rootPath = ClassUtils.getDefaultClassLoader().getResource("").getPath() + "static/ueditor/jsp";
        try {
            response.setCharacterEncoding("UTF-8");
            String exec = new ActionEnter(request, rootPath).exec();
            System.out.println(exec);
            PrintWriter writer = response.getWriter();
            writer.write(new ActionEnter(request, rootPath).exec());
            writer.flush();
            writer.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }`

注意：
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190705113706361.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0,size_16,color_FFFFFF,t_70)
ActionEnter类是ueditor里一个jar包的，添加以下依赖

 <dependency>
            <groupId>com.gitee.qdbp.thirdparty</groupId>
            <artifactId>ueditor</artifactId>
            <version>1.4.3.3</version>
        </dependency>

在这里插入图片描述

如果还有问题请添加以上截图里多出的两个依赖
至此就会发现，控制台不在报后端配置错误，单图上传可以点击了，文件上传，多图上传也可以选择文件了
在这里插入图片描述

但是还是会点击之后无法在编辑器正常显示图片
最后一步：修改config.json
在这里插入图片描述
填写所有图片访问路径前缀为“/ueditor/jsp”,大概有七八个地方，否则多图上传，文件上传那些也是不可以使用
最后效果

在这里插入图片描述

qq_43737121

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
springboot整合ueditor百度富文本编辑器详细教程

第一步：到官方下载ueditorhttps://ueditor.baidu.com/website/download.html（ueditor下载地址）解压，放到项目目录static下第二步：引入到前端页面中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script...
复制链接

扫一扫