[JavaScript知识库]前端实现批注功能（react版本）链接为jquery版本

主要核心js代码：

addPizhu = () => {

? ? ? ? const { selectText, inputContent, pizhuList }: any = this.state

? ? ? ? let newArr = pizhuList,

? ? ? ? ? ? addTime = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')

? ? ? ? ? ? newArr.push({

? ? ? ? ? ? userName: '管理员',

? ? ? ? ? ? selectContent: selectText,

? ? ? ? ? ? addTime: addTime,

? ? ? ? ? ? addContent: inputContent,

? ? ? ? })

? ? ? ? this.setState({ pizhuList: newArr })

? ? ? ? this.handleModalSelectCancel(addTime)

? ? }

? ? handleModalOk = () => {

? ? ? ? this.addPizhu()

? ? }

? ? handleModalCancel = () => {

? ? ? ? this.setState({ isModalOpen: false, inputContent: '' })

? ? }

? ? handleModalSelectCancel = (addTime) => {

? ? ? ? const { selRange,idIndex }:any = this.state

? ? ? ? let ms = new Date(addTime).getTime().toString()

? ? ? ? var el = document.createElement('span')

? ? ? ? el.className = 'selectTextBgColor'

? ? ? ? el.id = ms

? ? ? ? selRange.surroundContents(el)

? ? ? ? this.setState({ isModalOpen: false, inputContent: '',idIndex:ms })

? ? }

? ? openModal = (value) => {

? ? ? ? this.setState({ isModalOpen: true, selectText: value })

? ? }

? ? changeInputValue = (e) => {

? ? ? ? this.setState({ inputContent: e.target.value })

? ? }

? ? updatePizhu = (index) => {

? ? ? ? this.setState({ isEdit: true, editInputIndex: index })

? ? }

? ? saveAddValue = (e) => {

? ? ? ? const { isEdit, pizhuList, editInputIndex }: any = this.state

? ? ? ? let newArr = pizhuList

? ? ? ? newArr[editInputIndex].addContent = e.target.value

? ? ? ? this.setState({ isEdit: false, pizhuList: newArr })

? ? }

? ? changePositionById = (index,idName) => {

? ? ? ? this.setState({ currentIndex: index })

? ? ? ? let idms:string = new Date(idName).getTime().toString();

? ? ? ? document.getElementById(idms).scrollIntoView({behavior:'smooth'})

? ? }

参考文献：HTML 页面添加批注 - 冰封的心 - 博客园

网页添加批注与评论_七号大米的博客-CSDN博客_网页批注功能

Javascript中document.execCommand()的用法 - 暖爱 - 博客园

document.execCommand()的用法小记_JoLonn的博客-CSDN博客_execcommand用法

为鼠标选中文本添加样式、在鼠标位置插入节点_hilter的博客-CSDN博客

HTML DOM getRangeAt()用法及代码示例 - 纯净天空

Web前端实现锚点功能的三种方式 - lonelydawn的个人空间 - OSCHINA - 中文开源技术交流社区