underline-action v2.4.9-beta.9
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);
}
},
});
3 days ago
3 days ago
4 days ago
3 days ago
4 days ago
4 days ago
3 days ago
3 days ago
3 days ago
3 days ago
2 months ago
2 months ago
2 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
7 months ago
7 months ago
11 months ago
11 months ago
10 months ago
8 months ago
10 months ago
8 months ago
8 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
11 months ago
11 months ago
11 months ago
11 months ago
7 months ago
10 months ago
7 months ago
10 months ago
7 months ago
8 months ago
7 months ago
8 months ago
10 months ago
7 months ago
8 months ago
10 months ago
7 months ago
8 months ago
10 months ago
7 months ago
8 months ago
10 months ago
7 months ago
10 months ago
10 months ago
10 months ago
7 months ago
11 months ago
10 months ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago