Skip to content

mark-highlight is a simple tool,Highlight the content | mark-highlight 是一个简单的小工具,可以对选择的内容进行划线 高亮

License

Notifications You must be signed in to change notification settings

chunshand/mark-highlight

Repository files navigation

mark-highlight(beta)

Languages: 简体中文 | English

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

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

./image/demo.png

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

demo

示例代码

在线演示

如果感觉还不错的话,来个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();

About

mark-highlight is a simple tool,Highlight the content | mark-highlight 是一个简单的小工具,可以对选择的内容进行划线 高亮

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published