uniapp editor富文本编辑器，给标签添加更多属性

前段时间在开发一个聊天项目，项目中用到了@功能。需要在editor中添加一个span标签，标签中添加用户的id。结果在获取文本时，标签中的属性被过滤掉了。

null

查找好多资料，都没有发现相关资料，文档中也没有介绍。然后看了一下editor的源码，发现原来可以这样。。。

解决方案

引入模版

manifest.json

1
2
3
4
5
6
7
8
9
10
"h5": {
        "template": "template.h5.html",
        "async": {
            "timeout": 20000
        },
        "router": {
            "base": "./"
        }
    }

template.h5.html 文件放到 src 目录下在模版中引入 <script src="./static/js/quill.min.js"></script>

在template.h5.html中添加相关标签

参照文件 node_modules\@dcloudio\uni-h5\src\core\view\components\editor\formats\align.js

可以看到官网代码中 align 属性的添加方法。然后我们在 template.h5.html 文件中添加想要的属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
const Quill = window.Quill
        if(Quill){
            const { Scope, Attributor } = Quill.import('parchment')
            const config = {
                scope: Scope.INLINE
            }
            let contenteditableStyle = new Attributor.Attribute('contenteditable', 'contenteditable', config)
            let userIdStyle = new Attributor.Attribute('dataUserid', 'data-userid', config)
            Quill.register({
                "formats/contenteditable": contenteditableStyle,
                "formats/dataUserid": userIdStyle},
            true)
        }

添加完成。再往editor组件中添加标签的时候 contenteditable 和data-userid 属性就不会被过滤掉了。