vue中使用富文本插入小程序卡片

yang_web

于 2021-03-26 11:29:54 发布

阅读量1.5k

点赞数 4

分类专栏：小程序卡片文章标签： vue 小程序

本文链接：https://blog.csdn.net/yang_web/article/details/115234294

版权

小程序卡片专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在Vue项目中使用vue-quill-editor富文本编辑器，并自定义模块实现插入小程序卡片的功能。通过创建mp.js文件，导入并注册自定义的mp模块，设置相关属性和方法，使得用户能够在编辑器内方便地插入和展示小程序内容。

摘要由CSDN通过智能技术生成

vue中使用富文本插入小程序卡片

首先新建mp.js文件夹

import mp from '@/utils/mp'
Quill.register(mp, true)

import { Quill } from 'vue-quill-editor'

const BlockEmbed = Quill.import('blots/block/embed')
const Link = Quill.import('formats/link')

class mp extends BlockEmbed {
    static create(value) {
        const node = super.create(value)
        node.setAttribute('data-miniprogram-appid', value.appid)
        node.setAttribute('data-miniprogram-path', value.path)
        node.setAttribute('data-miniprogram-title', value.title)
        node.setAttribute('data-miniprogram-imageurl', value.imageurl)
        return node
    }
    static sanitize(url) {
        return Link.sanitize(url)
    }
	//防止再次编辑数据丢失
    static value(domNode) {
        return {
            appid: domNode.getAttribute('data-miniprogram-appid'),
            path: domNode.getAttribute('data-miniprogram-path'),
            title: domNode.getAttribute('data-miniprogram-title'),
            imageurl: domNode.getAttribute('data-miniprogram-imageurl')
        }
    }
}
mp.blotName = 'link'
mp.tagName = 'mp-miniprogram'
export default mp