Vue3+wangeditor富文本编辑器

最新推荐文章于 2025-10-10 14:21:11 发布

原创最新推荐文章于 2025-10-10 14:21:11 发布 · 575 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

该文章已生成可运行项目，

一、目标功能描述

在多端项目中，后台编辑人员通常是在 PC 端录入商品信息，但最终商品要在移动端展示给用户。为了保证内容排版和展示效果美观，需要在编辑时就能预览最终的呈现效果。因此在 PC 端的编辑界面中，我们往往会集成类似 wangEditor 这样的富文本编辑器，用来录入内容，并结合实时预览功能，将商品在移动端的展示效果同步展现在 PC 端，避免来回切换设备检查。

二、wangEditor介绍

wangEditor 是一款轻量级的 Web 富文本编辑器，特点是体积小、易上手、无依赖，常用于后台管理系统的文章编辑、评论输入等场景。它支持常见的文本样式、段落格式、图片视频插入、表格、代码块等功能，同时提供 Vue 和 React 封装，方便前端框架集成。相比 CKEditor、TinyMCE 等重量级编辑器，wangEditor 更适合轻量、快速接入的项目。

三、wangEditor使用

Vue3安装
安装时请注意查看打印日志中是否有版本不匹配问题,及时调整安装版本或更换工具
```
pnpm install @wangeditor/editor-for-vue@next --save
```

使用

<script setup lang="js">
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { shallowRef } from 'vue'
import '@wangeditor/editor/dist/css/style.css' // 引入 css

// 设置富文本编辑器模式 default功能完整,simple只有保留了基础功能
const mode = ref('default')

// 编辑器实例，必须用 shallowRef  (官网就这么写的)
const editorRef = shallowRef()

// 内容 HTML (数据绑定,在自定义组件中可以通过props传入,并添加computed计算属性set时调整父组件内容)
const valueHtml = ref('')

// 工具栏配置,这里移除了一些不太常用的内容,若想查看完整工具栏注掉即可
const toolbarConfig = {
  toolbarKeys: [
    'headerSelect',
    'blockquote',
    'bold',
    'underline',
    'italic',
    {
      'key': 'group-more-style',
      'title': '更多',
      'iconSvg':
        '<svg viewBox="0 0 1024 1024"><path d="M204.8 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path><path d="M505.6 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path><path d="M806.4 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path></svg>',
      'menuKeys': ['through', 'sup', 'sub', 'clearStyle']
    },
    'color',
    'bgColor',
    'fontSize',
    'fontFamily',
    'lineHeight',
    'bulletedList',
    'numberedList',
    'todo',
    {
      'key': 'group-justify',
      'title': '对齐',
      'iconSvg':
        '<svg viewBox="0 0 1024 1024"><path d="M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z"></path></svg>',
      'menuKeys': ['justifyLeft', 'justifyRight', 'justifyCenter', 'justifyJustify']
    },
    {
      'key': 'group-indent',
      'title': '缩进',
      'iconSvg':
        '<svg viewBox="0 0 1024 1024"><path d="M0 64h1024v128H0z m384 192h640v128H384z m0 192h640v128H384z m0 192h640v128H384zM0 832h1024v128H0z m0-128V320l256 192z"></path></svg>',
      'menuKeys': ['indent', 'delIndent']
    },
    {
      'key': 'group-image',
      'title': '图片',
      'iconSvg':
        '<svg viewBox="0 0 1024 1024"><path d="M959.877 128l0.123 0.123v767.775l-0.123 0.122H64.102l-0.122-0.122V128.123l0.122-0.123h895.775zM960 64H64C28.795 64 0 92.795 0 128v768c0 35.205 28.795 64 64 64h896c35.205 0 64-28.795 64-64V128c0-35.205-28.795-64-64-64zM832 288.01c0 53.023-42.988 96.01-96.01 96.01s-96.01-42.987-96.01-96.01S682.967 192 735.99 192 832 234.988 832 288.01zM896 832H128V704l224.01-384 256 320h64l224.01-192z"></path></svg>',
      'menuKeys': ['insertImage', 'uploadImage']
    },
    'insertTable',
    'divider'
  ],
  excludeKeys: ['insertVideo', 'uploadVideo', 'insertImage']
}

const editorConfig = {
  placeholder: '请输入内容...',
  MENU_CONF: {
    // 文件上传
    uploadImage: {
      server: , // 系统文件上传的地址,在vite中可以被代理截取
      fieldName: 'file',  // 上传文件参数名 formData类型
      meta: { token: '' },
      header: { Authorization: '' }, // 处理请求头
      metaWithUrl: false, // 让 meta 参数放在 formData 里，而不是拼到 url 上
      customInsert(res, insertFn) {
        // 图片展示url、鼠标悬停提示与图片加载失败时显示文字、点击跳转链接
        if (res.status === 200) {
          // 第一个参数为展示的网络地址
          insertFn(
            url
            '',
            ''
          )
        }
      }
    }
  }
}
const handleCreated = editor => {
  editorRef.value = editor // 记录 editor 实例，重要！
  editorRef.value.setHtml(props.content)
  // 根据父组件传递的readOnlyFlag，设置编辑器为只读
  if (props.readOnlyFlag) {
    editorRef.value.disable()
  } else {
    editorRef.value.enable()
  }
}

// todo 自行处理赋值
const handleChange = () => {
	// 如果change内容与原来内容相同就不要处理
  if (props.content === valueHtml.value) {
    return
  }
  
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})
<script>
<template>
  <div :style="{ border: '1px solid #ccc', width: editorWidth }">
    <Toolbar
      v-if="showToolbarFlag"
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      :style="{ height: editorHeight, overflowY: 'hidden' }"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
      @onChange="handleChange"
      :readOnly="readOnlyFlag"
    />
  </div>
</template>