vue3中使用wangEditor富文本编辑器

vue3中使用wangEditor富文本编辑器

npm install @wangeditor/editor --save

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

<script setup>

import {onBeforeUnmount, onMounted, ref, shallowRef} from 'vue'


import {Editor, Toolbar} from '@wangeditor/editor-for-vue'


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

// 内容 HTML
const valueHtml = ref('<p></p>')

// 编辑器配置
const editorConfig = {
  placeholder: '请输入内容...',
  MENU_CONF: {
    uploadImage: {
      server: "http://localhost:10101/upload/image",
      //文件名
      fieldName: "filename",
      //上传方式
      methods: "post",
      //上传大小
      maxFileSize: 1 * 1024 * 1024,
      //文件限制
      allowedFileTypes: ['image/*'],
      onbeforeunload(file) {
        //超过大小后进行提示
        if (file.maxFileSize > 10 * 1024 * 1024) {
          //这里设置超过大小提示
          // $(".cover_inpput_label").text("文件大小超过限制，单个图片大小最多为1M").css("color", "red")
          return false;
        }
      }, onSuccess(file, res) {
        // JS 语法
        console.log(`${file.name} 上传成功`, res)
      },
      customInsert(res, insertFn) {
        console.log(res);
        insertFn("http://localhost:10101/" + res.data.url);
      },
      // 单个文件上传失败
      onFailed(file, res) {           // JS 语法
        console.log(`${file.name} 上传失败`, res)
      },
      // 上传错误，或者触发 timeout 超时
      onError(file, err, res) {               // JS 语法
        console.log(`${file.name} 上传出错`, err, res)
      }
    },
  }
}
// 编辑器回调函数
const handleCreated = (editor) => {
  console.log("created", editor);
  editorRef.value = editor // 记录 editor 实例，重要！
  // window.editor = editor // 临时测试使用，用完删除
}
const handleChange = (editor) => {
  console.log("change:", editor.children);
}
const handleDestroyed = (editor) => {
  console.log('destroyed', editor)
}
const handleFocus = (editor) => {
  console.log('focus', editor)
}
const handleBlur = (editor) => {
  console.log('blur', editor)
}
const customAlert = (info, type) => {
  alert(`【自定义提示】${type} - ${info}`)
}
const customPaste = (editor, event, callback) => {
  console.log('ClipboardEvent 粘贴事件对象', event)

  // 自定义插入内容// 禁止粘贴
  // editor.insertText('xxx')

  // 返回值（注意，vue 事件的返回值，不能用 return）
  callback(true) // 返回 false ，阻止默认粘贴行为
  // callback(true) // 返回 true ，继续默认的粘贴行为
}

// 及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return

  // 销毁，并移除 editor
  editor.destroy()
})


const toolbarConfig = {
  /* 工具栏配置 */
  toolbarKeys: [
    'clearStyle',
    'color',
    'bold',
    'bgColor',
    'underline',
    'through',
    'fontSize',
    'fontFamily',
    'lineHeight',

    '|',

    // 菜单组，包含多个菜单
    {
      key: 'group-image', // 必填，要以 group 开头
      title: '图片', // 必填
      // iconSvg: '<svg></svg>',
      menuKeys: [
        'uploadImage',
      ]
    },
    {
      key: 'group-link',
      title: '链接',
      menuKeys: ['insertLink', 'editLink', 'unLink', 'viewLink']
    },
    {
      key: 'group-table',
      title: '表格',
      menuKeys: ['insertTable',
        'deleteTable',
        'insertTableRow',
        'deleteTableRow',
        'insertTableCol',
        'deleteTableCol',
        'tableHeader',
        'tableFullWidth']
    },
    'divider',
    'emotion',
    'blockquote',
    'headerSelect',
    'redo',
    'undo',
    'fullScreen'
  ]
}
//  获取当前的html信息   这里获取的资源可上传
// const getHtml = () => {
//   const editor = editorRef.value
//   if (editor == null) return
//   console.log(editor.getHtml())
// }
</script>

<template>
  <!--  <div>-->
  <!--    <button @click="getHtml">获取 html</button>-->
  <!--  </div>-->
  <div style="border: 1px solid #ccc">
    <!-- 工具栏 -->
    <Toolbar
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        style="border-bottom: 1px solid #ccc"
    />
    <!-- 编辑器 -->
    <Editor
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        @onChange="handleChange"
        @onCreated="handleCreated"
        @onDestroyed="handleDestroyed"
        @onFocus="handleFocus"
        @onBlur="handleBlur"
        @customAlert="customAlert"
        @customPaste="customPaste"
        style="height: 500px"
    />
  </div>
</template>

<style src="@wangeditor/editor/dist/css/style.css"></style>

const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
    // 查看所有工具栏key
    console.log(editor.getAllMenuKeys())
}详细如下（2022-06-22  为60个） ['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']

参考文档：vue3 wangEditor-v5 进行 工具栏配置 - 王希有 - 博客园 (cnblogs.com)