Languages: 简体中文 | English
mark-highlight是一个简单轻量的内容选中划线高亮小工具。
- 保留元素的内部结构
- 对于选中区域的标记操作，有很简单的数据符号，方便下次访问时再次渲染绘制选中区域，前提是内容不变的情况下。
- 适用于笔记、博客、电子书、批注等场景。
- 支持下划线 高亮类型的标记
- 支持标记区域点击事件
- 支持标记区域设置自定义类名
- 支持视图更新标记区域同步更新
如果感觉还不错的话，来个star~
<script src="../dist/index.umd.js"></script>or
npm install mark-highlight let mark = new Mark("idName"|HtmlElement);
mark.render();回调
mark.on('render', (el) => {
console.log('render dom',el);
})
mark.on('selected', (data) => {
let markStr = data.markStr;
let {
top_left,
top_center,
top_right,
// ...
} = data.position;
})设置高亮
mark.highlight(markStr, 'className', (e) => {
// 高亮区域点击后回调
// 获取点击元素的_rangeStr
let _markStr = e.target.getAttribute('data-id')
})设置下划线
mark.underline(markStr, 'className', (e) => {
let _markStr = e.target.getAttribute('data-id')
})删除标记
mark.remove(markStr, 'underline|highlight');添加标记
mark.add({
markStr:"",
type: 'underline|highlight',
className: "",
data: {},
clirk:()=>{},
});显示所有
mark.show();隐藏所有
mark.hide();清空标记
mark.clear();获取所有标记
mark.getMarks();