springBoot 整合UEditor百度富文本编辑器。

标签: html  javascript

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器。可以定制很多如新闻页面,博客等等。UEditor使用简单,支持二次开发,适合快速开发很多业务功能,研究几天发个学习文档。

    UEditor分为前端和后端前端主要是编辑器部分的渲染功能,后端主要是上传文件,图片等功能。

一,下载地址

  •  官网下载地址:https://github.com/fex-team/ueditor

  •  官方文档地址:http://fex.baidu.com/ueditor/

  • 下载的源码里面是没有ueditor.all.js,需要使用node.js命令初始化出dist文件里面有所有需要引入到项目的静态资源文件。创建ueditor目录,目录如下:

  • ueditor.json为后台上传功能配置。ueditor.config.js为前端UI控制配置。lang包下有中英文js,其它文件为编辑器的前端UI配置,如需自定义样式可对应找到文件修改。

嫌麻烦不想搞node.js的可以看下载这个:https://pan.baidu.com/s/12LfTRLSMQ5jEHu64lDX5nA     提取码:wwp3  

二,前端,后端使用

  • pom.xml引用
  •         <!-- ueditorConfig -->
            <dependency>
                <groupId>com.gitee.qdbp.thirdparty</groupId>
                <artifactId>ueditor</artifactId>
                <version>1.4.3.3</version>
            </dependency>
            <dependency>
                <groupId>org.json</groupId>
                <artifactId>json</artifactId>
                <version>20200518</version>
            </dependency>
            <dependency>
                <groupId>commons-fileupload</groupId>
                <artifactId>commons-fileupload</artifactId>
                <version>1.4</version>
            </dependency>
            <dependency>
                <groupId>commons-codec</groupId>
                <artifactId>commons-codec</artifactId>
                <version>1.9</version>
            </dependency>

     

  • 页面中引入 ueditor.config.js, ueditor.all.js, zh-cn.js 即可。详细的基础配置官方文档上都有写很简单,这里不再重复写了。
  • ueditor.config.js的配置问题
  • config配置比较重要,配置文件注释是中文写的比较清楚,根据自己的业务需求配置对应的功能,这里着重说明下关于请求后台的配置。
  • 打开ueditor.config.js文件(原来是没有server_url的 这是我自定义了一个项目访问路径,然后把服务器同一请求路径改成自己的服务器请求路径)这样做是为了访问后台加载后台配置文件config.json文件,config.json文件里面定义了编辑器的图片上传,文件上传,涂鸦上传和对应回显的一些配置。(当然config.json文件里面的路径也要改成自己服务器的路径。)

  • /**
     * ueditor统一入口
     */
    
    @Controller
    @RequestMapping("ueditor")
    public class UeditorController {
    
        @RequestMapping(value="/config")
        public String config(HttpServletRequest request, HttpServletResponse response) {
            return "redirect:/js/ueditor/config.json";
        }
    
    }

    ueditor.config.js请求的后台统一路径里面要写的代码(我是重定向到config.json文件了),这样前端富文本就能获取到config.json文件中的上传接口相关的配置。上传功能就可以使用了。

  • 加载执行的流程大概是:页面渲染编辑器 --->(使用上传功能时)发送服务器同一请求接口获取config.json文件 ---> 读取配置文件 ---> 上传文件调用配置文件的接口;

  • 我没有对配置文件修改太多东西,只是在调用上传接口的时候复写了上传接口返回的路径;

  • var ue = UE.getEditor('container',window.UEDITOR_CONFIG);
    // 重写文件上传路径
    UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
    UE.Editor.prototype.getActionUrl = function(action) {
        if (action == 'uploadimage' || action == 'uploadfile') {
            return '/ueditor/upload';
        } else {
            return this._bkGetActionUrl.call(this, action);
        }
    }

    *判断js中action的名称要和config.json里的action名称对应才可以对应返回自己想要的接口路径

  • 这样我们就能上传图片到我们自定义的上传接口上了。

  • 做到这一步基本上都已经完成了,如果上传功一张图片就会调用自己写的图片上传接口了。

三,小问题

  • 关于图片回显上图中imageUrlPrefix是图片回显的前缀在回显到编辑器里的img标签地址上会自动加上该前缀,如果没有正确回显就看看img标签回显的地址是否和在自己服务器上的图片地址一致。
  • layui中使用setContent() 给富文本赋值的时候会出现赋值不成功,加上setTimeout() 即可。
  • setTimeout(function () {
        ue.setContent('给富文本赋值的内容');
    },500);

    到这里基本都结束了,需要特别定制化的功能就靠自己探索了。

 

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