首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue使用wangEditor5富文本编辑器

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

2025-09-06 15:43:25 作者：夏う沫

在数字化的今天,无论是内容创作还是日常办公,一款强大易用的富文本编辑器都是必不可少的工具,wangEditor 5正是这样的一款开源编辑器,这篇文章主要介绍了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

官网：用于 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()

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

使用效果

4. 工具栏配置

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

5. 编辑器配置

// 编辑器配置
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);
        }
      },
    },
  },
};

使用过程中的问题

1. 获取工具栏的key值

官网教程获取工具的key，说是toolbar.getConfig().toolbarKeys

但是我通过打印editorRef.value.getConfig().toolbarKeys，却是undefined

最后是通过检查html元素查到的key值

2. 全局样式覆盖，导致编辑器内容样式失效

项目中有给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();

  // 内容 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>

总结

到此这篇关于Vue使用wangEditor 5富文本编辑器步骤及可能遇到的问题的文章就介绍到这了,更多相关Vue使用wangEditor5富文本编辑器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！