Uniapp + 富文本编辑器UEditorPlus 上传文件

公司一个项目需要用到富文本编辑器功能，在开源社区找到一个不错的工具： UEditorPlus。功能挺全面的，很适合开发。

准备工作

引入npm包

npm i vue-ueditor-wrap

下载

到项目Gitee仓库下载dist文件

拷贝

在前端的static目录下新建文件夹UEditorPlus（可自定义,但需与下文静态资源根路径路径保持一致）,把dist目录下的文件拷贝到该文件夹下

注册

在项目main.js文件中添加全局组件

import VueUeditorWrap from 'vue-ueditor-wrap';
Vue.component('vue-ueditor-wrap', VueUeditorWrap);

引用

在需要用到的页面引用组件

<template>
  <div class="content">
    <vue-ueditor-wrap v-model="content" editor-id="editor" :config="editorConfig" :editorDependencies="['ueditor.config.js','ueditor.all.js']" style="height:500px;" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      content: '',
	  //可以在此处配置,也可以到ueditor.config.js文件中配置
      editorConfig: {
        // 编辑器后端服务接口，参考后端规范 https://open-doc.modstart.com/ueditor-plus/backend.html
        serverUrl: '/user/config', //初始化及上传文件皆使用此接口
        // 配置 UEditorPlus 的静态资源根路径，此处路径需要和你拷贝的路径一直,否则会报错
        UEDITOR_HOME_URL: '/static/UEditorPlus',
        UEDITOR_CORS_URL: '/static/UEditorPlus',
        //设置富文本编辑器高度,默认为320
        initialFrameHeight: 500,
         // 插入图片设置
        imageConfig: {
          // 是否禁止本地上传
          disableUpload: false,
          // 是否禁止在线管理,若用不到可设为true
          disableOnline: false,
          // 自定义选择按钮
          selectCallback: null
        }
      }
    }
  }
}
</script>

1、serverUrl、UEDITOR_HOME_URL、UEDITOR_CORS_URL三者必须配置

2、UEditorPlus 编辑器在引用时调用serverUrl接口进行配置初始化,所以我们需要针对此接口返回配置信息

3、即使不初始化也可以使用，但是无法进行上传。所以用不到上传功能的可以忽略下文

初始化配置

我们仅需初始化我们用到的配置即可，如果仅用到上传图片，只需填写图片相关配置：配置文档

@Data
public class ConfigPo {

    //执行上传图片的action名称 默认值：uploadimage 必填
    private String imageActionName = "image";

    // 提交的图片表单名称，默认值：upfile
    private String imageFieldName = "file";

    // 上传大小限制，单位B，默认值：2048000
    private Integer imageMaxSize = 10485760;

    // 允许上传的图片格式 
    private String[] imageAllowFiles = {".jpg", ".png", ".jpeg"};

    // 图片访问路径前缀，默认值：空 必填
    private String imageUrlPrefix = "http://localhost:8080/";
    
}

	import cn.hutool.json.JSONUtil;  

	/**
     * 初始化配置 初始化以GET请求方式发送
     */
    @GetMapping("/config")
    public String getConfig() {
        //返回一个json格式字符串
        return JSONUtil.toJsonStr(new ConfigPo());
    }

上传图片

点击按钮

后端接受上传文件

    @PostMapping("/config")
    public EditResponse upload(@RequestParam("file") MultipartFile file, @RequestParam("action") String action) {
		// 根据action的值判断是哪种文件上传,具体逻辑请自行实现
        return JSONUtil.toJsonStr(EditResponse.builder()
                .state("success")
                .url("upload/" + file.getOriginalFilename())
                .original(file.getOriginalFilename()).build());//只能返回json对象或json字符串,不能返回bean
    }

@Data
@Builder
public class EditResponse {

    //状态值 成功只能返回SUCCESS(必须大写),否则填写失败原因
    private String state;

    //上传路径
    private String url; //要想在编辑器中正确展示图片,请确保 imageUrlPrefix + url路径可以访问到图片资源

    //标题,可不填
    private String title;

    //上传文件原始名称 绑定在img标签的alt属性中
    private String original;
}

此时富文本绑定的值为:<p><img src="http://localhost:8080/upload/demo.png" alt="demo.png"/></p