Vue3中集成富文本插件wangEditor

Vue3中集成富文本插件wangEditor

1、安装

npm install @wangeditor/editor --save
npm install @wangeditor/editor-for-vue@next --save

2、创建组件文件

在components下创建文件夹WangEditor，再创建index.vue文件

<template>
  <el-row>
    <div style="border: 1px solid #ccc">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden;"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>
  </el-row>
</template>

<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted, watchEffect, watch } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { getToken } from "@/utils/auth";
const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/uploadWangEditor"); // 上传文件服务器地址
const headers = ref({
  Authorization: "Bearer " + getToken()
});
 
// 声明 props 
const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  }
})

// 声明事件消息emits
const emits = defineEmits(["update:modelValue"]);

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML
const valueHtml = ref('')
// 当属性变化时，自动赋值给valuesHtml
watchEffect(() => {
  if (props.modelValue) {
    valueHtml.value = props.modelValue;
  }
})
// 当内容变化时，自动赋值给props.modelValue
watch(valueHtml, (newHtml) => {
  emits('update:modelValue', newHtml);
})

const toolbarConfig = {}
const editorConfig = { 
  placeholder: '请输入内容...',
  MENU_CONF:{
    uploadImage: {
        fieldName: 'file',
        //服务器地址
        server: uploadUrl.value,
        // 上传请求头部
        headers: headers.value,
        // 单个文件的最大体积限制，默认为 2M
        maxFileSize: 5 * 1024 * 1024, // 5M
        // 最多可上传几个文件，默认为 100
        maxNumberOfFiles: 10,
        // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
        allowedFileTypes: ['image/*']
      },
      uploadVideo: {
        fieldName: 'file',
        //服务器地址
        server: uploadUrl.value,
        // 上传请求头部
        headers: headers.value,
        // 单个文件的最大体积限制，默认为 2M
        maxFileSize: 20 * 1024 * 1024, // 20M
        // 最多可上传几个文件，默认为 5
        maxNumberOfFiles: 3,
        // 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
        allowedFileTypes: ['video/*']
      }
  }
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}

</script>   

3、引入组件到main.js

// 引入wangEditor富文本组件
import WangEditor from '@/components/WangEditor'
// 全局组件挂载
app.component('WangEditor', WangEditor)

4、页面调用

<el-form-item label="内容" prop="content">
  <wang-editor v-model="form.content" />
</el-form-item>

5、后端上传接口

在CommonController添加uploadWangEditor方法，保证返回值满足官网的要求

/**
     *
     * wangEditor 富文本文件上传
     *
     * @param file
     * @return
     * @throws Exception
     */
    @PostMapping("/uploadWangEditor")
    public AjaxResult uploadWangEditorFile(MultipartFile file) throws Exception
    {
        try
        {

            // 上传文件路径
            String filePath = YxaConfig.getUploadPath();
            // 上传并返回新文件名称
            String fileName = FileUploadUtils.upload2(filePath, file);
            String url = serverConfig.getUrl() + fileName;
            AjaxResult ajax = AjaxResult.success();
            JSONObject data = new JSONObject();
            data.put("url", url);
            data.put("alt", fileName);
            data.put("href", url);
            ajax.put("data", data);
            ajax.put("errno", 0);
            return ajax;
        }
        catch (Exception e)
        {
            AjaxResult ajax = AjaxResult.success();
            ajax.put("errno", 1);
            ajax.put("message", e.getMessage());
            return ajax;
        }
    }