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

清疚 2021-12-16 06:05 537阅读 0赞

作者推荐使用layer编辑器，更加美观，文档地址  
[https://www.layui.com/doc/modules/layedit.html][https_www.layui.com_doc_modules_layedit.html]  
**第一步：到官方下载ueditor**  
https://ueditor.baidu.com/website/download.html（ueditor下载地址）  
github项目地址https://github.com/yssyhw/springboot，下载后，运行访问http://localhost:8080/admin/test （防止大家懒得看，我直接给了项目源代码，这是一个简单的案例，以下是我用了自己项目做得教程，所以路劲不一样，直接下载请注意，修改路劲，还不会的qq:1023732997

[demo下载链接][demo]下载运行，访问localhost：9090即可

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70]  
解压，放到项目目录static下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 1]  
**第二步：引入到前端页面中**

<!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>

效果，图片展示用了自己项目的图片  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 2]  
**第三步：修改源代码，因为官方提供的是JSP，所以引入之后图片上传等一些功能无法使用：注意了以下每一步都是重点**  
1.修改ueditor.config.js，防止大家懒得自己写，给大家贴一下代码  
var server\_url = window.location.protocol+"//"+window.location.hostname+":"+window.location.port  
serverUrl: server\_url+"/config"  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 3]  
修改后  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 4]  
2.新增一个ServerController（一定要单独建一个，不要在其他Controller里写）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 5]  
代码：

@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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 6]  
如果还有问题请添加以上截图里多出的两个依赖  
至此就会发现，控制台不在报后端配置错误，单图上传可以点击了，文件上传，多图上传也可以选择文件了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 7]  
但是还是会点击之后无法在编辑器正常显示图片  
**最后一步：修改config.json**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 8]  
填写所有图片访问路径前缀为“/ueditor/jsp”,大概有七八个地方，否则多图上传，文件上传那些也是不可以使用  
最后效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 9]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 10]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 11]  
如果对你有帮助请打开淘宝搜索店铺，未来能量 双击关注

[https_www.layui.com_doc_modules_layedit.html]: https://www.layui.com/doc/modules/layedit.html
[demo]: https://download.csdn.net/download/qq_40618664/12209262
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70]: /images/20211214/a2ad739ffda04203864dc3831619c942.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 1]: /images/20211214/620fb3e438a84c5db00aef0ba6bcf3e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 2]: /images/20211214/9e6bd27151a4471f92457fe36aa83ff0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 3]: /images/20211214/9b6c39c1f9fa491b8dcc1f1abf8df48d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 4]: /images/20211214/82e1943e26e549f0b763f5a09fa7bfcd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 5]: /images/20211214/b33d4eee2de34abba8363b2d9ac03552.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 6]: /images/20211214/7bb23ffedf954042b573ae61e2dd0709.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 7]: /images/20211214/ce01abc6f69646d28cae01b3e79537ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 8]: /images/20211214/1b0c90d3064f4d55a7718facf7b66a53.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 9]: /images/20211214/182f7f3eeeff434495c57ba1fe571afc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 10]: /images/20211214/36cb582b91544fe18198b2cc6298d4ac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 11]: /images/20211214/6f8eb26f4e944e42a4ae55377ecf63b9.png