介绍

vue + tiptap + elementUI 封装的开箱即用tiptap编辑器

github仓库：https://github.com/font-size/vue-tiptap-wrap

npm地址：https://www.npmjs.com/package/vue-tiptap-wrap

安装

npm i vue-tiptap-wrap

在页面中使用

import tiptap from 'vue-tiptap-wrap'

<tiptap v-model="msg"/>

关于上传

如果你想使用上传功能

<tiptap v-model="msg" :setImage="setImage" :action="action"
 :headers="headers" :params="params" :accept="accept"/>

参数参考

data() {
    return {
        action: 'https://www.example.com/upload', // 上传服务器api
        headers: {
            Authorization: 'abcdefg', // 请求头
        },
        params: {
            storeId: '123456', // 传参
        }, 
        accept: 'image/*',  // 接受上传的文件类型
    }
},
methods:{
    // 上传成功后的回调
    // editor 编辑器实例
    // data 返回的数据
    setImage(editor, data) {
      editor.chain().focus().setImage({ src: data.file_url }).run();
    }
}

更多上传参数请参考 ElementUI的upload组件 https://element.eleme.cn/#/zh-CN/component/upload

相关资源

https://www.tiptap.dev/
https://element.eleme.cn/