前言

使用wangeditor的痛与泪

我使用的是Vue3+vite的项目

一、什么是wangEditor？

wangEditor是一款基于JavaScript的富文本编辑器插件，用于在网页中实现所见即所得的编辑功能。它提供了丰富的编辑功能，包括文字样式设置、插入图片、插入表格、代码高亮等。wangEditor易于集成和使用，支持自定义配置和扩展。

tip：作者已经不再维护这个项目了，具体可以去抖音查看

二、安装wangEditor

vue2

yarn add @wangeditor/editor-for-vue
# 或者 npm install @wangeditor/editor-for-vue --save

Vue3

yarn add @wangeditor/editor-for-vue@next
# 或者 npm install @wangeditor/editor-for-vue@next --save

三、基本使用

组件封装+文件上传，具体可以详细见官网www.wangeditor.com/v5/menu-con…

<template>
  <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;" :model-value="props.valueHtml" :defaultConfig="editorConfig"
      :mode="mode" @onCreated="handleCreated" @onChange="onchange" />
  </div>
</template>

<script setup>
  import '@wangeditor/editor/dist/css/style.css' // 引入 css
  import axios from 'axios'
  import { ElMessage } from 'element-plus';
  import { ref, shallowRef, onBeforeUnmount } from "vue";
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
  /**
* 富文本
*/
  //定义公共参数
  const props = defineProps({
    valueHtml: {
      type: String
    }
  })
  //定义回调函数
  let emits = defineEmits(['update:valueHtml'])

  const percentage = ref(0)
  const mode = ref('default')
  const editorRef = shallowRef()
  const toolbarConfig = {}
  const editorConfig = {
    placeholder: '请输入内容...',
    MENU_CONF: {
      // 配置上传图片
      uploadImage: {
        // 自定义上传，insertFn是上传成功后插入图片到编辑器
        async customUpload(file, insertFn) {
          const targetUrl = "/dev-api/upload";  // 后端接口服务器地址
          // 创建 FormData 对象
          const formData = new FormData();
          formData.append("file", file);
          try {
            // 使用 Axios 发送 POST 请求
            const response = await axios.post(targetUrl, formData, {
              //  自定义请求头
              headers: {
                'Content-Type': 'multipart/form-data',
                // 'X-CSRFToken': csrfToken.value,
                // 'Authorization': Token.value
              },
              // 获取进度条进度
              onUploadProgress: (progressEvent) => {
                const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
                percentage.value = progress
              }
            });
            // 获取响应信息
            if (response.data.msg === '上传成功') {
              ElMessage.success(`${file.name}上传成功`);
              console.log('======>', response.data.data);   // 上传成功后打印，这个是用的Naive的通知组件
              insertFn('/dev-api/download?name=' + response.data.data)   //上传成功后插入图片到编辑器，具体根据后端返回设置，第一个url是必填项，alt和href非必填。
              percentage.value = 0  // 这个是我自己的赋值，我上传成功后把进度条置为0
            } else {
              ElMessage.error(`${file.name}上传失败`);
              percentage.value = 0
            }
          } catch (error) {
            // 处理请求错误
            ElMessage.error(`上传失败，错误：${error}`);
            percentage.value = 0
          }
        },
        // 单个文件上传成功之后
        onSuccess(file, res) {  // TS 语法
          // onSuccess(file, res) {          // JS 语法
          console.log(`${file.name} 上传成功`, res)
        },
      }
    },
  }
  const onchange = (res) => {
    emits('update:valueHtml', res.getHtml())
  }
  // 组件销毁时，也及时销毁编辑器
  onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
  })
  const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
  }
</script>

<style lang="scss" scoped></style>

父组件

<KuEditor :valueHtml="product.form.content" @update:valueHtml="handleUpdate" />