Vue3引入WangEditor富文本编辑器

下载WangEditor

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

自定义WangEditor组件

<template>
  <div style="border: 1px solid #ccc; z-index: 100; width: 100%">
    <!-- 工具栏 -->
    <Toolbar :editor="editorRef" :mode="mode" style="border-bottom: 1px solid #ccc" />
    <!-- 编辑器 -->
    <Editor :model-value="modelValue" :style="style"
            :disabled="disabled" :default-config="editorConfig"
            :mode="mode" @onCreated="handleCreated" @onChange="handleChange" />
  </div>
</template>
<!-- 上传到OSS数据安全-跨域设置 图片设置默认width: 100%  -->
<script lang="ts" setup>
import "@wangeditor/editor/dist/css/style.css";
import { onBeforeUnmount, shallowRef } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { IDomEditor, IEditorConfig } from "@wangeditor/editor";
import baseService from "@/service/baseService";
import {getUuid} from "@/utils/utils";
import axios from "axios";
import { Boot } from '@wangeditor/editor'
import markdownModule from '@wangeditor/plugin-md'

Boot.registerModule(markdownModule)

const props = defineProps({
  modelValue: {
    type: String,
    required: true
  },
  mode: {
    type: String,
    default: "default" // 可选值：[default | simple]
  },
  placeholder: {
    type: String,
    default: "# 请输入文章内容 <br/>" +
      "# 支持MarkDown <br/>" +
      " * 标题<br/>" +
      "  - #\n<br/>" +
      "  - ##\n<br/>" +
      "  - ###\n<br/>" +
      "  - ####\n<br/>" +
      "  - #####\n<br/>" +
      " * 列表 - + *<br/>" +
      " * 引用 ><br/>" +
      " * 分割线 ---<br/>" +
      " * 代码块 ```js"
  },
  style: {
    default: "height: 300px;"
  },
  disabled: {
    type: Boolean,
    default: false
  }
});

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

// 编辑器配置
const editorConfig: Partial<IEditorConfig> = {
  placeholder: props.placeholder,
  readOnly: props.disabled,
  MENU_CONF: {
    uploadImage: {
      server: `http://your-oss`, // 上传地址
      fieldName: "file",
      // 自定义上传
      customUpload: async (file: File) => {
        // 获取 OSS 上传策略
        const policyResponse = await baseService.get('/oss/policy');
        const { accessid, policy, signature, dir, host } = policyResponse.data;

        // 构造 OSS 表单上传的数据
        const formData = new FormData();
        const key = `${dir}/${getUuid()}_${file.name}`;
        formData.append('key', key);
        formData.append('policy', policy);
        formData.append('OSSAccessKeyId', accessid);
        formData.append('dir', dir);
        formData.append('signature', signature);
        formData.append('file', file);
        formData.append('host', host);

        // 上传图片到 OSS //数据安全-跨域设置
        try {
          await axios.post(host, formData, {
            headers: {
              'Content-Type': 'multipart/form-data',
            },
          });
          // 上传成功后，插入带有宽度限制的图片到编辑器
          const url = host + '/' + key;
          const imgHtml = `<p><img src="${url}" style="width: 100%; max-width: 100%; height: auto;"/></p>`;
          emit("update:modelValue", props.modelValue + imgHtml);
        } catch (error) {
          console.error('上传失败', error);
        }
      }
    }
  },
};

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

const handleCreated = (editor: IDomEditor) => {
  editorRef.value = editor;
};

// 编辑器change事件触发
const emit = defineEmits(["update:modelValue"]);
const handleChange = (editor: IDomEditor) => {
  emit("update:modelValue", editor.getHtml());
};
</script>

效果图

markdown插件

import markdownModule from '@wangeditor/plugin-md'

Boot.registerModule(markdownModule)