Vue3富文本编辑器wangEditor 5使用总结

news2024/11/20 9:45:33

wangEditor 是一个开源 Web 富文本编辑器，开箱即用，配置简单

官网链接：https://www.wangeditor.com

使用流程：

1.在项目中安装wangEditor

输入以下命令安装

npm install @wangeditor/editor --save
npm install @wangeditor/editor-for-vue@next --save

或

yarn add @wangeditor/editor
yarn add @wangeditor/editor-for-vue@next

2.封装组件components

组件部分：

<template>
  <div style="border: 1px solid #ccc">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode"/>

    <Editor style="height: 150px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode"
            @onCreated="handleCreated" @onChange="updateHtml"/>
  </div>
</template>
<script>
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import {onBeforeUnmount, ref, shallowRef, onMounted, watch} from 'vue'
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'

export default {
  components: {Editor, Toolbar},
  props: ['html'],
  setup(props, {emit}) {
    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef()

    // 内容 HTML
    const valueHtml = ref(props.html)
    watch(props, (newValue, oldValue) => {
      valueHtml.value = newValue.html
    })

    const updateHtml = (val) => {
      emit('change', valueHtml.value)
    }
    const toolbarConfig = {
      toolbarKeys: [
        'bold', // 加粗
        'italic', // 斜体
        'through', // 删除线
        'underline', // 下划线
        'bulletedList', // 无序列表
        'numberedList', // 有序列表
        'color', // 文字颜色
        'insertLink', // 插入链接
        'fontSize', // 字体大小
        'lineHeight', // 行高
        'uploadImage', // 上传图片
        'delIndent', // 缩进
        'indent', // 增进
        'deleteImage',//删除图片
        'divider', // 分割线
        'insertImage', // 网络图片
        'insertTable', // 插入表格
        'justifyCenter', // 居中对齐
        'justifyJustify', // 两端对齐
        'justifyLeft', // 左对齐
        'justifyRight', // 右对齐
        'undo', // 撤销
        'redo', // 重做
        'clearStyle', // 清除格式
        'fullScreen' // 全屏

      ],
      excludeKeys: [
        'bgColor', // 背景色
        'blockquote', // 引用
        'codeBlock', // 代码段
        'emotion', // 表情
        'fontFamily', // 字体
        'headerSelect' // 标题
      ]
    }
    const editorConfig = {
      placeholder: '请输入内容...',
    }

    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
      const editor = editorRef.value
      if (editor == null) return
      editor.destroy()
    })

    const handleCreated = (editor) => {
      editorRef.value = editor // 记录 editor 实例，重要！
    }

    return {
      editorRef,
      valueHtml,
      mode: 'default',
      toolbarConfig,
      editorConfig,
      handleCreated, updateHtml
    }
  }
}
</script>

3.调用

● 引入

import MyEditor from ‘@/components/MyEditor’;

● 注册

在调用页面内的 export default 中添加属性 components，属性值为一个对象 { }，对象中放入上一步 import 引入的组件名称即可注册成功。

例：components:{ MyEditor },

● 模板区内使用（指 template ）

	<MyEditor 
 		   @change="(html) => { html为更新值 }" 
  		:html="默认值"/>

配置项（根据以上组件部分相对应）：

在这里插入图片描述
change 事件的形参为当前编辑器的 change 事件触发后的当前内容值，用来实时获取当前富文本内容，是在富文本组件中的 change 事件中向父组件传递当前的值，达到更新值的效果。
html 属性为向富文本设置的默认内容，是父组件（当前调用组件）向子组件（ MyEditor ）传递的内容默认值。