underline-action
v2.4.9
Published
## 这是什么
Downloads
295
Readme
Underline-action
这是什么
该库用于选中页面一段富文本并给文本划线,常用于各种划线评论与划线高亮场景
install
npm i underline-action
How to use
import { UnderlineAction } from 'underline-action';
// 初始化
const action = UnderlineAction({
selector: '#app', // 需要插入划线的祖先dom
tag: 'span', // 插入的标签类型
getKeyByRange({ start, end, props }) { // 生成划线id的规则
return `${start}-${end}`;
},
needFilterNode(node) { // 需要过滤的节点
if (xxx) {
return NodeFilter.FILTER_REJECT;
}
return NodeFilter.FILTER_ACCEPT;
},
getAttachNode(node) { // 不计入总字数的节点,但是如果被跨过会被划线,返回true,目前仅支持文本节点
if (node.parentElement.tagName === 'SUP') {
return true;
}
},
getRenderInfo(node) { // 获取节点的用于渲染的信息,会在render方法的patchProps带上
return {};
}
});
// 划线
const key = action.insertSpanInRange(start, end, props, temp)
# start 开始划线的位置
# end 结束划线的位置
# props span上要带的属性
# temp boolean 为true返回生成的span数组,为false会存在实例的state里面,这里如果不需要存储状态建议用true
// 用key删除划线
action.removeSpanByKey(key)
# key 划线id
// 直接用span删除划线
action.mergeTextNode(span)
# span 划线span
// 获取起止之间文本
action.getTextByStartEnd(start, end)
# start 开始的位置
# end 结束的位置
// 获取所有span
const spans = action.getSpanByKey(key)
# key 划线id
// 获取dom总字数
const num = action.getTotalCount()
// 获取用于渲染元信息
const renderInfo = action.getRenderInfoByStartEnd(start, end)
// 使用元信息渲染,参考vue调和器
render(renderInfos, renderdom, {
patchProp(el, key, prevValue, nextValue) {
switch (key) {
case 'textContent':
case 'style':
el[key] = nextValue;
break;
case 'type':
break;
default:
el.setAttribute(key, nextValue);
break;
}
},
remove(el) {
el.remove();
},
createElement(type) {
return document.createElement(type);
},
createText(text) {
return document.createTextNode(text);
},
insert(node, parent, anchor) {
if (anchor) {
parent.insertBefore(node, anchor);
} else {
parent.appendChild(node);
}
},
});