前端实现批注功能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 页面添加批注 - 冰封的心 - 博客园

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

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

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

这篇好文章是转载于：学新通技术网