关于划字逻辑的文档
背景:
- 左侧文章滑动需关联右侧问题,右侧点击左侧定位(左右交互的时候都需要加样式)
代码实现方法:
componentDidMount() {
this.left.current &&
this.left.current.addEventListener("click", (e) => {
this.setState(
{
BtnLoc: { btnX: e.clientX, btnY: e.clientY },
},
() => console.log(this.state.BtnLoc)
);
document.onselectionchange = this.OnChange();
});
}
OnChange = () => {
var selObj = document.getSelection();
var selectedText = selObj.toString();
var range = document.getSelection().getRangeAt(0)
var start = range.startOffset
var end = range.endOffset
}
addHtml = (item:any,index:any) => {
const {offsetStart,offsetEnd}=item
var allContent = this.left.current.innerText
var pre = allContent.substr(0, offsetStart)
var text = allContent.substr(offsetStart, offsetEnd - offsetStart);
var post = allContent.substr(offsetEnd);
this.left.current.innerHTML = pre + `<span id=mrc${index}>` + text + '</span>' + post
this.scrollIntoView(index)
setTimeout(() => {
this.removeHtml(pre,text,post)
}, 3000);
}
scrollIntoView = (id:any) => {
var ele = document.getElementById(`mrc${id}`)
ele.style.backgroundColor='#fffbf1'
ele.style.borderBottom='solid 2px #ff0019'
ele.scrollIntoView({ behavior: "smooth", block: "start" })
};
API必备:
参考文档: