• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

前端实现批注功能react版本链接为jquery版本

武飞扬头像
booleann
帮助1

主要核心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 - 中文开源技术交流社区

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

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanhhegbhk
系列文章
更多 icon
同类精品
更多 icon
继续加载