vue3 wangeditor 自定义SelectMenu以及附件上传(文档末尾有相关文档)

疯狂打码

已于 2023-07-31 10:49:29 修改

阅读量435

点赞数

文章标签： vue.js 前端 javascript

于 2023-07-31 10:46:10 首次发布

本文链接：https://blog.csdn.net/weixin_42746203/article/details/132017211

版权

引入编辑器

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

引入附件上传

yarn add @wangeditor/plugin-upload-attachment

引入wangeditor编辑器

import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { Boot} from '@wangeditor/editor'
//附件上传
import attachmentModule from '@wangeditor/plugin-upload-attachment'

自定义功能

调用编辑器实例之前注册自定义编辑器组件

 class MySlesctMenu {
      constructor() {
            this.title = '测试菜单',
            this.tag = 'select'
      }
      // 下拉框的选项
      getOptions(){
        const options = [
          { value: '0', text: '快捷回复' },
          // { value: 'beijing', text: '北京', styleForRenderMenuList: { 'font-size': '32px', 'font-weight': 'bold' } },
          { value: 'beijing', text: '北京'},
          { value: 'shanghai', text: '上海'},
          { value: 'shenzhen', text: '深圳' }
        ]
        return options
      }
      // 获取菜单执行时的 value ，用不到则返回空 字符串或 false
      getValue() { return '0' }
      // 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
      isActive() { return false }
      // 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
      isDisabled() { return false }
      // 点击菜单时触发的函数
      exec(editor, value) {
        if (this.isDisabled(editor)) return
        editor.insertText(value) // value 即 this.value(editor) 的返回值
      }
    }
    const menuConf = {
      key: 'my-menu-1', // menu key ，唯一。注册之后，需通过 toolbarKeys 配置到工具栏
      factory() {
        return new MySlesctMenu()
      },
    }
    //注册下拉
    Boot.registerMenu(menuConf)

现在下拉就注册完成了

然后编辑器实例，必须用 shallowRef

    const editorRef = shallowRef()

然后是编辑器的一些配置

    // 工具栏配置 
    insertKeys 添加自定义组件  上面已经注册过了
     excludeKeys 屏蔽组件
    const toolbarConfig = {
      insertKeys:{
        index: 99,
        keys: ['my-menu-1','uploadAttachment']
      },
      excludeKeys:['blockquote','header1','header2','header3','bold','underline','italic','through','clearStyle','bulletedList','justifyLeft','justifyRight','justifyCenter','insertLink','insertTable','codeBlock','todo']
    }
    // 编辑器配置
    const editorConfig = {
      placeholder: '请输入内容...',
      hoverbarKeys: {
        attachment: {
          menuKeys: ['downloadAttachment'], // “下载附件”菜单
        },
      },
      MENU_CONF: {
        uploadImage:{
          server: '/api'+uploadPath+'uploads',
          // form-data fieldName ，默认值 'wangeditor-uploaded-file'
          fieldName: 'file',
          maxFileSize: 10 * 1024 * 1024, // 1M
          maxNumberOfFiles: 10,
          // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
          allowedFileTypes: ['image/*'],
          meta: {
            name: 'editor',
          },
          // 自定义增加 http  header
          headers: {
            Authorization: Token,
          },
          // 跨域是否传递 cookie ，默认为 false
          withCredentials: true,
          timeout: 5 * 1000, // 5 秒
          // 小于该值就插入 base64 格式（而不上传），默认为 0
          base64LimitKB: 5, // 5kb
          customInsert(res, insertFn) {
            // if(res.code != 200) return ElementPlus.ElMessage.error(res.msg)
            // 从 res 中找到 url alt href ，然后插图图片
            console.log(11111111111)
            insertFn(res.data, res.data, res.data)
          },
        },
    // “上传附件”菜单的配置
    uploadAttachment: {
      server: '/api'+uploadPath+'uploads', // 服务端地址
          timeout: 5 * 1000, // 5s
          fieldName: 'file',
          meta: {
            name: 'editor',
          },
          // 自定义增加 http  header
          headers: {
            Authorization: Token,
          },
      // 跨域是否传递 cookie ，默认为 false
      withCredentials: true,
      maxFileSize: 10 * 1024 * 1024, // 10M
      onBeforeUpload(file) {
        console.log('onBeforeUpload', file)
        return file // 上传 file 文件
        // return false // 会阻止上传
      },
      onProgress(progress) {
        console.log('onProgress', progress)
      },
      onSuccess(file, res) {
        console.log('onSuccess', file, res)
      },
      onFailed(file, res) {
        // alert(res.message)
        console.log('onFailed', file, res)
      },
      onError(file, err, res) {
        // alert(err.message)
        console.error('onError', file, err, res)
      },
      // // 上传成功后，用户自定义插入文件
      customInsert(res, file, insertFn) {
        console.log('customInsert', res)
        const url  = res.data || {}
        if (!url) throw new Error(`url is empty`)
        console.log(insertFn)
        //创建html节点
        // 插入附件到编辑器
        insertFn(`[Click to download attachment-${file.name}]`, url)
      },
      // 插入到编辑器后的回调
      onInsertedAttachment(elem) {
        console.log('inserted attachment', elem)
      },
    },
      }
    }

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

    const handleCreated = (editor) => {
      editorRef.value = editor // 记录 editor 实例，重要！
    }
     return {
      editorRef,
      valueHtml,
      mode: 'simple', // 或 'simple'  'default'
      toolbarConfig,
      editorConfig,
      handleCreated,

    };

这样就完成了

代码

<Toolbar
              style="border-bottom: 1px solid #ccc"
              :editor="editorRef"
              :defaultConfig="toolbarConfig"
              :mode="mode"
          />
          <Editor
              style="height:300px; overflow-y: hidden;"
              v-model="valueHtml"
              :defaultConfig="editorConfig"
              :mode="mode"
              @onCreated="handleCreated"
          />

然后就可以进行一些相关的操作。因为官方文档对vue3的语法也没多少文档，这也是我凡代码示例出来的
总之：wangeditor 不论是自定义组件还是自带的组件其实都是组件，他们都要经历注册，插入编辑器的过程。然后才能显示