mark-highlight(beta)

Languages: 简体中文 | English

mark-highlight是一个简单轻量的内容选中划线高亮小工具。

• 保留元素的内部结构
• 对于选中区域的标记操作，有很简单的数据符号，方便下次访问时再次渲染绘制选中区域，前提是内容不变的情况下。
• 适用于笔记、博客、电子书、批注等场景。

• 支持下划线 高亮类型的标记
• 支持标记区域点击事件
• 支持标记区域设置自定义类名
• 支持视图更新标记区域同步更新

demo

示例代码

在线演示

如果感觉还不错的话，来个star~

安装

<script src="https://github.com/chunshand/mark-highlight/raw/v0.0.2/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();