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()

// 內(nèi)容 HTML
const valueHtml = ref('<p>hello</p>')

// 工具欄配置
const toolbarConfig = {}
// 編輯器配置
const editorConfig = { placeholder: '請輸入內(nèi)容...' }

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: '請輸入內(nèi)容...',
  // 能否編輯
  readOnly: true,
  // 菜單設(shè)置
  MENU_CONF: {
    // 上傳圖片設(shè)置
    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; /* 恢復(fù)為瀏覽器默認(rèn)字體粗細(xì) */
}
h2,
h3,
h4,
h5,
h6,
p {
  font-size: revert; /* 恢復(fù)為瀏覽器默認(rèn)字體大小 */
  font-weight: revert; /* 恢復(fù)為瀏覽器默認(rèn)字體粗細(xì) */
}

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();

  // 內(nèi)容 HTML
  const valueHtml = ref('');

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

  // 編輯器配置
  const editorConfig = {
    placeholder: '請輸入內(nèi)容...',
    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();
  };

//獲取遠(yuǎn)程數(shù)據(jù)
  const getList = async () => {
    try {
      const res = ''	//await 獲取數(shù)據(jù)接口();
      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; /* 恢復(fù)為瀏覽器默認(rèn)字體粗細(xì) */
    }
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
      font-size: revert; /* 恢復(fù)為瀏覽器默認(rèn)字體大小 */
      font-weight: revert; /* 恢復(fù)為瀏覽器默認(rèn)字體粗細(xì) */
    }

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