mark-stage

基于svg实现的网页元素上添加标记（如高亮、下划线等）

A js library for add svg marks (highlight, underline, etc.) on web page

Install

npm install mark-stage

或

<script src="../dist/markstage.umd.js"></script>

Quick Start

import { MarkStage, Highlight } from 'mark-stage';
//  const { MarkStage, Highlight } = marks;  // umd的全局名称为markstage

const stage = new MarkStage(document.querySelector('article'));

document.addEventListener("mouseup", markSelection, false);

function markSelection() {
  const selection = window.getSelection();
  const range = selection.getRangeAt(0);

  if (!selection.isCollapsed) {
    stage.add(new Highlight({
      range,
      classList: ['highlight']  // 自定义类名
    })); // add mark
  }
}

stage.event.on('click', function (e) {

  const uuid = e.target.getAttribute('data-uuid');

  stage.remove(uuid); // remove by mark.uuid
})

⚠ 注意：mark是通过在container下插入一个svg并进行绘制，svg通过position: absolute将自己覆盖在target之上产生重叠的效果

const containerPosition = window.getComputedStyle(container, null).position;  // 检测container的style的position设置
if (containerPosition === 'static' || !containerPosition) {
  container.style.position = 'relative';  // 如果container未设置适当的position，则会默认添加relative
}

Options

Stage

new MarkStage(target, container)

option | description | default :--------: | :--------: | :--------: target | 创建stage的目标元素 | - container | stage的svg被插入的元素位置 | document.body

Mark

new Mark({...})

option | description | default :--------: | :--------: | :--------: range | 标记的元素范围Range | - classList | 自定义类名数组 | []

Salute

marks-pane