前段时间在开发一个聊天项目,项目中用到了@功能。需要在editor中添加一个span标签,标签中添加用户的id。结果在获取文本时,标签中的属性被过滤掉了。
查找好多资料,都没有发现相关资料,文档中也没有介绍。然后看了一下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
属性就不会被过滤掉了。