关于富文本编辑器wangeditor在vue3中的使用

1.安装

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

安装以上两个包

2.引入进行使用

注释：

valueHtmlCount：编辑里的内容，为富文本字符串

editorRef：工具栏实例

toolbarConfig：工具栏配置文件

editorConfig：编辑器菜单配置文件

onCreated：创建实例触发的事件

onChange：编辑里的内容改变触发的事件

引入组件：

引入样式文件
import '@wangeditor/editor/dist/css/style.css';
引入组件文件
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
引入数据类型（因为我用的是ts，所以需要引入数据类型）
import { IToolbarConfig, IEditorConfig, IDomEditor } from '@wangeditor/editor';
引入vue常用
import { onBeforeUnmount, ref, shallowRef, onMounted, watch } from 'vue';

创建实例：

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

定义接收富文本的变量：

// 内容
const valueHtmlCount = ref(props.valueHtml)

3.配置

配置工具栏：

const toolbarConfig: Partial = {
  /* 工具栏配置 */
  toolbarKeys: [
    'redo',
    'undo',
    '|',
    'headerSelect',
    'bold',
    'italic',
    'underline',
    'fontSize',
    'fontFamily',
    'color',
    'bgColor',
    'through',
    'sub',
    'sup',
    'clearStyle',
    'lineHeight',
    'insertLink',
    'divider',
    'emotion',
    'blockquote',
    'justifyLeft',
    'justifyRight',
    'justifyCenter',
    'justifyJustify',
    {
      key: 'group-image', // 必填，要以 group 开头
      title: '图片', // 必填
      iconSvg: '',
      menuKeys: ['uploadImage',
        'deleteImage']
    },
    'fullScreen',
  ]

以下是所支持的所有工具栏字段，共六十个
  // toolbarKeys: ['bold', 'underline', 'italic', 'through', 'code', 'sub', 'sup', 'clearStyle', 'color',
  //   'bgColor', 'fontSize', 'fontFamily', 'indent', 'delIndent', 'justifyLeft', 'justifyRight',
  //   'justifyCenter', 'justifyJustify', 'lineHeight', 'insertImage', 'deleteImage', 'editImage', 'viewImageLink',
  //   'imageWidth30', 'imageWidth50', 'imageWidth100', 'divider', 'emotion', 'insertLink', 'editLink', 'unLink',
  //   'viewLink', 'codeBlock', 'blockquote', 'headerSelect', 'header1', 'header2', 'header3', 'header4', 'header5',
  //   'todo', 'redo', 'undo', 'fullScreen', 'enter', 'bulletedList', 'numberedList', 'insertTable', 'deleteTable',
  //   'insertTableRow', 'deleteTableRow', 'insertTableCol', 'deleteTableCol', 'tableHeader', 'tableFullWidth',
  //   'insertVideo', 'uploadVideo', 'editVideoSize', 'uploadImage', 'codeSelectLang']
}

详情参考官网：工具栏配置 | wangEditor

编辑器配置：

type InsertFnType = (url: string) => void
const editorConfig: Partial = {
  MENU_CONF: {
    // 行高
    lineHeight: {
      lineHeightList: ['0.5', '1', '1.5', '2', '2.5', '3', '3.5', '4']
    },
    // 字体
    //   fontFamily: {
    //     fontFamilyList: ['黑体',
    //       '楷体']
    //   },
    uploadImage: {
      async customUpload(file: any, insertFn: InsertFnType) {
        let date = new Date().getTime();
        let filepath = 'nft/' + date + '/' + file.name;
        // file 即选中的文件
        client.value.put(filepath, file)
          .then(function (res: any) {
            // 上传图片，返回结果，将图片插入到编辑器中
            insertFn(res.url)
          }).catch(function (err: any) {
            console.log(err)
          })
      },
    }
  },
  placeholder: '请输入内容...',
}

上传图片配置：

我这里是上传到阿里云的，参考：上传至阿里云OSS · wangEditor 用户文档

也可以上传给后端，参考配置：菜单配置 | wangEditor

销毁组件：

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

记录实例：

const handleCreated = (editor: IDomEditor) => {
  if (editor == null) return
  editorRef.value = editor // 记录 editor 实例，重要！
  // console.log('editor', editor)
}

动态获取内容：

const handleChange = (editor: IDomEditor) => {
   console.log('valueHtmlCount', valueHtmlCount.value)
}