vue3 wangeditor 添加自定义功能 --- 字间距（可参考添加其他功能）

范特东南西北风

已于 2024-07-08 17:23:28 修改

阅读量1.1k

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue javascript

于 2024-07-08 17:13:05 首次发布

本文链接：https://blog.csdn.net/weixin_43436640/article/details/140269298

前言

wangeditor是一款pc端的富文本编辑器，需求是添加自定义菜单并且注册字间距的自定义新功能（其他属性可以照着这些文件编写）

1、安装wangeditor

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

2、封装组件（已经包括了视频本地上传、图片本地上传、字间距功能）

目录结构如下：
在这里插入图片描述

3、组件使用

   import richText from '@/components/richText/index.vue'

   <richText v-model:value="formInfo.content" path="article/article_info"></richText>

4、组件代码

index.vue

<template>
  <div style="border: 1px solid #ccc">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
    <Editor
      style="height: 500px; overflow-y: hidden"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
      @onChange="handleChange"
      @onDestroyed="handleDestroyed"
      @onFocus="handleFocus"
      @onBlur="handleBlur"
      @customAlert="customAlert"
      @customPaste="customPaste"
      class="editor-class"
    />
  </div>
</template>

<script>
  //  vue3 中注册需要单起一个script标签
  //  写在setup中会导致重复注册菜单的问题
  import '@wangeditor/editor/dist/css/style.css' // 引入 css
  import {
   
    onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
  import {
   
    Editor, Toolbar } from '@wangeditor/editor-for-vue'
  import {
   
    getToken, getRefreshToken } from '@/utils/auth'
  import {
   
    Boot } from '@wangeditor/editor'
  import letterSpacingMenuConf from './letterSpacing/index.js'
  import letterSpacing from './letterSpacing/styleConfig/index.js'
  import {
   
    ElMessage } from 'element-plus'

  Boot.registerMenu(letterSpacingMenuConf) // 注册菜单
  Boot.registerModule(letterSpacing) // 注册属性
</script>

<script setup>
  const emits = defineEmits(['update:value', 'getText'])

  const props = defineProps({
   
   
    mode: {
   
   
      type: String,
      default: 'default',
    },
    value: {
   
   
      type: String,
      default: '',
    },
    maxUploadImg: {
   
   
      type: [Number, String],
      default: 100,
    },

    // 图片上传数量
    maxFileSizeImg: {
   
   
      type: Number,
      default: 2 * 1024 * 1024,
    },

    path: {
   
   
      // 上传图片的路径
      type: String,
      required: true,
      default: 'article/article_info',
    },

    // 视频上传数量
    maxUploadVideo: {
   
   
      type: [Number, String],
      default: 3,
    },

    // 视频上传文件大小
    maxFileSizeVideo: {
   
   
      type: Number,
      default: 5 * 1024 * 1024,
    },
  })

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

  // 模拟 ajax 异步获取内容
  onMounted(() => {
   
   })

  const insertField = ref('')

  // 内容 HTML
  const valueHtml = computed({
   
   
    get: () => props.value,
    set: (val) => {
   
   },
  })

  const toolbarConfig = {
   
   
    // 排除全屏
    excludeKeys: ['fullScreen'],

    insertKeys: {
   
   
      index: 12,
      keys: ['letterSpacing'],
    },
  }

  const editorConfig = {
   
   
    placeholder: '请输入内容',
    MENU_CONF: {
   
   
      // 设置行高的值
      lineHeight: {
   
   
        lineHeightList: ['1', '1.5', '1.75', '2',