完整代码如下:
支持功能:
- 支持插入标签
- 标签点按删除
- 删除时删除整块标签
- 数据回显
- 保存时获取json格式的数据(包含标签id)
值得说的:
主要应用了 Range 对象来确定编辑框的光标显示位置,每插入一个标签,应将光标置后:
this.insertTag(node)
this.Range.setEndAfter(node)
this.Range.setStartAfter(node)
Range对象 end 和 start 点索引相等时形成光标。
参考链接:
react版本:juejin.cn/post/712895…
Range API: developer.mozilla.org/zh-CN/docs/…