标签：文本编辑 vue tiptap data https wrap 上传

介绍

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/

标签：文本编辑,vue,tiptap,data,https,wrap,上传
来源： https://blog.csdn.net/qq_36812165/article/details/118390857

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。