vue3 wangeditor/editor-for-vue 富文本使用支持上传图片等

<template>

  <div style="border: 1px solid #ccc; width: 100%; z-index: 99">

    <Toolbar

      style="border-bottom: 1px solid #ccc"

      :editor="editorRef"

      :defaultConfig="toolbarConfig"

      mode="default"

    />

    <Editor

      v-if="!ismode"

      style="height: 380px; overflow-y: hidden"

      v-model="modelValue[prop][lan]"

      :defaultConfig="Object.assign(editorConfig, customEditorConfig)"

      mode="default"

      @onCreated="handleCreated"

    />

    <Editor

      v-else

      style="height: 380px; overflow-y: hidden"

      v-model="modelValue[prop]"

      :defaultConfig="Object.assign(editorConfig, customEditorConfig)"

      mode="default"

      @onCreated="handleCreated"

    />

  </div>

</template>

<script lang="ts" setup>

import '@wangeditor/editor/dist/css/style.css'; // 引入 css

import { Editor, Toolbar } from '@wangeditor/editor-for-vue';

import { IEditorConfig, IToolbarConfig } from '@wangeditor/editor';

import { CommonApiUrls, GlobalCommonApi } from '@common/reqApi';

defineOptions({

  name: 'editorTemplate'

});

interface PropsType {

  modelValue: IObject;

  lan: LanguageType;

  ismode?: boolean;

  prop: string;

  customEditorConfig?: Partial<IEditorConfig>;

}

const props = defineProps<PropsType>();

const origin = window.location.origin?.includes('.com')

  ? window.location.origin

  : 'https://gshr-test.geely-test.com';

const { modelValue, lan, customEditorConfig, ismode, prop } = toRefs(props);

const editorRef = shallowRef();

// 记录 editor 实例，重要！

const handleCreated = (editor: any) => {

  editorRef.value = editor;

};

onBeforeUnmount(() => {

  const editor = editorRef.value;

  if (editor == null) return;

  editor.destroy();

});

const toolbarConfig: Partial<IToolbarConfig> = {

  // 工具栏配置

  toolbarKeys: [

    'bold', // 加粗

    'underline', // 下划线

    'italic', // 斜体

    'through', // 删除线

    'code', // 插入代码

    'sub', // 下标

    'sup', // 上标

    'clearStyle', // 清除样式

    'color', // 字体颜色

    'bgColor', // 背景颜色

    'fontSize', // 字号

    'fontFamily', // 字体

    'indent', // 增大缩进

    'delIndent', // 减小缩进

    'justifyLeft', // 左对齐

    'justifyRight', // 右对齐

    'justifyCenter', // 居中对齐

    'justifyJustify', // 两端对齐

    'lineHeight', // 行高

    'insertImage', // 插入图片

    'deleteImage', // 删除图片

    'editImage', // 编辑图片

    'viewImageLink', // 查看图片链接

    'imageWidth30', // 图片宽度30%

    'imageWidth50', // 图片宽度50%

    'imageWidth100', // 图片宽度100%

    'divider', // 分割线

    'emotion', // 表情

    'insertLink', // 插入链接

    'editLink', // 编辑链接

    'unLink', // 去除链接

    'viewLink', // 查看链接

    'codeBlock', // 代码块

    'blockquote', // 引用

    'headerSelect', // 标题选择

    'header1', // 一级标题

    'header2', // 二级标题

    'header3', // 三级标题

    'header4', // 四级标题

    'header5', // 五级标题

    'todo', // 任务列表

    'redo', // 重做

    'undo', // 撤销

    'fullScreen', // 全屏

    'enter', // 换行

    'bulletedList', // 无序列表

    'numberedList', // 有序列表

    'insertTable', // 插入表格

    'deleteTable', // 删除表格

    'insertTableRow', // 插入行

    'deleteTableRow', // 删除行

    'insertTableCol', // 插入列

    'deleteTableCol', // 删除列

    'tableHeader', // 表头

    'tableFullWidth', // 表格全宽

    // 'insertVideo', // 插入视频

    // 'uploadVideo', // 上传视频

    // 'editVideoSize', // 编辑视频大小

    'uploadImage' // 上传图片

    // 'codeSelectLang' // 选择代码语言

  ]

};

const uploadImg = (file) => {

  console.log('file', file);

  const formData = new FormData();

  formData.append('file', file as any);

  GlobalCommonApi.uploadFileUrl(formData).then(res => {

    if (res.code === 'success') {

      const userToken = localStorage.getItem('userToken') || '';

      modelValue.value[prop.value] =

        modelValue.value[prop.value] +

        `<img src="${origin}/gshr/api/sys/sys/gshrSysAttachment/getFile/${res.data.uid}?userToken=${userToken}" />`;

      console.log(

        'xxxx',

        modelValue.value,

        prop.value,

        modelValue.value?.[prop.value]

      );

      ElMessage.success(window.$lpk('Upload_succeeded', lan.value));

    } else {

      ElMessage.error(res?.message);

    }

  });

};

const editorConfig: Partial<IEditorConfig> = {

  MENU_CONF: {

    uploadImage: {

      customUpload: uploadImg,

      server: CommonApiUrls.uploadFileUrl,

      uploadImgMaxLength: 9,

      maxFileSize: 5 * 1024 * 1024, // 单个文件的最大体积限制，默认为 5M

      fieldName: 'file',

      meta: {

        userToken: localStorage.getItem('userToken')

      }

    }

  },

  // 其他属性...

  placeholder: '请输入内容...',

  readOnly: false,

  autoFocus: true,

  // 选中弹窗重写

  hoverbarKeys: {

    text: {

      menuKeys: [

        'headerSelect',

        // 'insertLink',

        'bulletedList',

        '|',

        'bold',

        'through',

        'color',

        'bgColor',

        'clearStyle'

      ]

    }

  }

};

defineExpose({ editorRef });

</script>

<style>

/* ..w-e-text-container [data-slate-editor] */

</style>