Vue使用wangEditor 5富文本编辑器步骤及可能遇到的问题

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

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

import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue' //引入组件

<template>
    <div style="border: 1px solid #ccc">
      <!-- 工具栏 -->
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        mode="default"
      />
      <!-- 编辑器 -->
      <Editor
        style="height: 500px; overflow-y: hidden;"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        mode="default"
        @onCreated="handleCreated"
      />
    </div>
</template>

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

// 内容 HTML
const valueHtml = ref('<p>hello</p>')

// 工具栏配置
const toolbarConfig = {}
// 编辑器配置
const editorConfig = { placeholder: '请输入内容...' }

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

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

// 工具栏配置
const toolbarConfig = {
  // 隐藏全屏、视频
  excludeKeys: ['fullScreen', 'group-video']
};

// 编辑器配置
const editorConfig = {
  placeholder: '请输入内容...',
  // 能否编辑
  readOnly: true,
  // 菜单设置
  MENU_CONF: {
    // 上传图片设置
    uploadImage: {
      // 自定义插入图片
      async customUpload(file: File, insertFn) {
        try {
          let formData = new FormData();
          formData.append('file', file);

          //获取上传图片地址
          const data = await postFileUpload(formData);
          // 从 res 中找到 url alt href ，然后插入图片
          insertFn(data, '', data);
        } catch (error) {
          console.log(error);
        }
      },
    },
  },
};

h1 {
  font-size: 2em;
  font-weight: revert; /* 恢复为浏览器默认字体粗细 */
}
h2,
h3,
h4,
h5,
h6,
p {
  font-size: revert; /* 恢复为浏览器默认字体大小 */
  font-weight: revert; /* 恢复为浏览器默认字体粗细 */
}

ul {
  list-style-type: disc;
}

<template>
  <div class="rizhi">
    <div style="padding: 5px">
      <a-button
        style="margin: 0 5px"
        type="primary"
        :loading="saveLoading"
        @click="onSave"
        v-if="isEdit"
        >
        保存
      </a-button>
      <a-button
        style="margin: 0 5px"
        type="primary"
        @click="onEdit"
        v-else-if="!isEdit"
        >
        编辑
      </a-button>
    </div>
    <div class="edit">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        mode="default"
        />
      <Editor
        :style="{ height: tabViewContentHeight + 'px' }"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        mode="default"
        @onCreated="handleCreated"
        />
    </div>
  </div>
</template>
<script lang="tsx">
  export default {
    name: 'xxxx',
  };
</script>
<script lang="tsx" setup>
  import '@wangeditor/editor/dist/css/style.css'; // 引入 css
  import { computed, onMounted, onBeforeUnmount, ref, shallowRef } from 'vue';
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue';

  // 判断是保存还是编辑
  const isEdit = ref(false);

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

  // 内容 HTML
  const valueHtml = ref('');

  // 工具栏配置
  const toolbarConfig = {
    excludeKeys: ['fullScreen', 'group-video'],
  };

  // 编辑器配置
  const editorConfig = {
    placeholder: '请输入内容...',
    readOnly: true,
    MENU_CONF: {
      uploadImage: {
        // 自定义插入图片
        async customUpload(file: File, insertFn) {
          try {
            let formData = new FormData();
            formData.append('file', file);
            
            const data = 	'/xx/xx'		//await 上传图片接口(formData);
            // 从 res 中找到 url alt href ，然后插入图片
            insertFn(data, '', data);

            // 上传图片后，得保存
            imageList1.push(data);
          } catch (error) {
            console.log(error);
          }
        },
      },
    },
  };

  // 初始化编辑器
  const handleCreated = (editor) => {
    editorRef.value = editor; // 记录 editor 实例，重要！
  };

  // 保存
  const saveLoading = ref(false);

  // 初始图片
  let imageList1: any = [];
  // 修改后图片
  let imageList2: any = [];
  const onSave = async () => {
    try {
      saveLoading.value = true;

      let deleteImageList: any = [];
      // 保存时先删除图片
      imageList2 = editorRef.value.getElemsByType('image').map((item) => item.src);

      imageList1.forEach((item) => {
        if (!imageList2.includes(item)) {
          deleteImageList.push(item);
        }
      });

      if (deleteImageList.length !== 0) {
        // 删除图片接口
        //await 删除图片接口();
      }

      // 再保存
      //await 保存接口();
      //await 刷新接口();
      
      editorRef.value.disable();
      isEdit.value = false;
      messageSucc('保存成功');
    } catch (error) {}

    saveLoading.value = false;
  };

  const onEdit = () => {
    isEdit.value = true;
    editorRef.value.enable();
  };

//获取远程数据
  const getList = async () => {
    try {
      const res = ''	//await 获取数据接口();
      valueHtml.value = res.updateExplanation;

      setTimeout(() => {
        // 获取初始图片
        imageList1 = editorRef.value.getElemsByType('image').map((item) => item.src);
      }, 0);
    } catch (error) {}
  };

  onMounted(async () => {
    await getList();
  });

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

<style lang="less" scoped>
  .rizhi {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    .rizhiHtml {
      border: 1px solid #ccc;
      overflow-y: scroll;
      padding: 5px;
      flex: 1;
    }

    .edit {
      border: 1px solid #ccc;
    }
  }

  :deep(.w-e-text-container) {
    h1 {
      font-size: 2em;
      font-weight: revert; /* 恢复为浏览器默认字体粗细 */
    }
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
      font-size: revert; /* 恢复为浏览器默认字体大小 */
      font-weight: revert; /* 恢复为浏览器默认字体粗细 */
    }

    ul {
      list-style-type: disc;
    }
  }
</style>