Vue使用wangEditor?5富文本編輯器步驟及可能遇到的問題

更新時間：2025年09月06日 15:44:04 作者：夏う沫

在數(shù)字化的今天,無論是內(nèi)容創(chuàng)作還是日常辦公,一款強大易用的富文本編輯器都是必不可少的工具,wangEditor 5正是這樣的一款開源編輯器,這篇文章主要介紹了Vue使用wangEditor?5富文本編輯器步驟及可能遇到問題的相關(guān)資料,需要的朋友可以參考下

安裝

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

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

官網(wǎng)：用于 Vue React | wangEditor

使用

1. 在script中引入css樣式和組件

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

2. 在template中使用組件

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

3. 初始化編輯器

// 編輯器實例，必須用 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();
});

使用效果

4. 工具欄配置

// 工具欄配置
const toolbarConfig = {
  // 隱藏全屏、視頻
  excludeKeys: ['fullScreen', 'group-video']
};

5. 編輯器配置

// 編輯器配置
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 = await postFileUpload(formData);
          // 從 res 中找到 url alt href ，然后插入圖片
          insertFn(data, '', data);
        } catch (error) {
          console.log(error);
        }
      },
    },
  },
};

使用過程中的問題

1. 獲取工具欄的key值

官網(wǎng)教程獲取工具的key，說是toolbar.getConfig().toolbarKeys

但是我通過打印editorRef.value.getConfig().toolbarKeys，卻是undefined

最后是通過檢查html元素查到的key值

2. 全局樣式覆蓋，導致編輯器內(nèi)容樣式失效

項目中有給h1、h2、h3、h4....等元素設置默認font-size font-weight等

在項目中單獨設置font-size：initial font-weight：initial，都不生效

最后是賦值font-size：revert font-weight：revert，才解決

revert表示恢復為瀏覽器默認值

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

  // 內(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();
  };

//獲取遠程數(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; /* 恢復為瀏覽器默認字體粗細 */
    }
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
      font-size: revert; /* 恢復為瀏覽器默認字體大小 */
      font-weight: revert; /* 恢復為瀏覽器默認字體粗細 */
    }

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

總結(jié)

到此這篇關(guān)于Vue使用wangEditor 5富文本編輯器步驟及可能遇到的問題的文章就介紹到這了,更多相關(guān)Vue使用wangEditor5富文本編輯器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

Vue使用wangEditor?5富文本編輯器步驟及可能遇到的問題

目錄

安裝

使用

1. 在script中引入css樣式和組件

2. 在template中使用組件

3. 初始化編輯器

4. 工具欄配置

5. 編輯器配置

使用過程中的問題

1. 獲取工具欄的key值

2. 全局樣式覆蓋，導致編輯器內(nèi)容樣式失效

完整文件

總結(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

Vue使用wangEditor?5富文本編輯器步驟及可能遇到的問題

目錄

安裝

使用

1. 在script中引入css樣式和組件

2. 在template中使用組件

3. 初始化編輯器

4. 工具欄配置

5. 編輯器配置

使用過程中的問題

1. 獲取工具欄的key值

2. 全局樣式覆蓋，導致編輯器內(nèi)容樣式失效

完整文件

總結(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

2. 全局樣式覆蓋，導致編輯器內(nèi)容樣式失效