vue中实现简单的富文本编辑器

彦青i

于 2024-03-27 15:31:22 发布

阅读量266

点赞数 3

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_41200374/article/details/130843674

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

html

      <div ref="editorContent"
           id="editorContent"
           :class="['editor-content',{'hidden':textLength!=0}]"
           contenteditable="true"
           @click="watchDivPosition($event)"
           @keyup="watchDivPosition($event)"
           @input="watchTextLength($event)">
      </div>

js

 // 可编辑div获取range节点
    getDivPosition(event) {
      const doc = event.target.ownerDocument || event.target.document
      const win = doc.defaultView || doc.parentWindow
      const range = win.getSelection().getRangeAt(0)
      return range
    },
    // 设置光标位置
    setCaretPosition(ctrl, lastEditRange = null) {
      // console.log({ ctrl, lastEditRange });
      if (!lastEditRange) {
        window.getSelection().collapse(ctrl, 0)
      } else {
        const doc = ctrl.ownerDocument || ctrl.document
        const win = doc.defaultView || doc.parentWindow
        const selection = win.getSelection()
        selection.removeAllRanges()
        selection.addRange(lastEditRange)
      }
    },
    watchTextLength(event) {
      const range = this.getDivPosition(event)
      this.lastEditRange = range;
      const editorContent = this.$refs.editorContent
    
      //解决删除所有内容后全选颜色残留问题
      if (editorContent.innerHTML == '<br>') {
        this.$refs.editorContent.firstChild.remove()
        this.updateTextColor(this.textColor[0])
      }
      // //计算所有长度
      const emoDomList = editorContent.querySelectorAll('.emoWH')
      const imgDomList = editorContent.querySelectorAll('.imgWH')
      this.textLength = editorContent.innerText.length + emoDomList.length + imgDomList.length
      if (this.textLength >= 3000) {
        this.$Message.warning("文章最长3000字")
      }

    },
    watchDivPosition(event) {
      const range = this.getDivPosition(event)
      // console.log('click', range);
      this.lastEditRange = range
      let parentNode = range.commonAncestorContainer.parentNode
      // console.log("元素", parentNode);
      // console.log("元素名", parentNode.nodeName);
      // console.log("颜色", parentNode.color);
      
     switch (parentNode.nodeName) {
        case 'B':
          this.showType = 'textStrong'
          this.selectColorValue = '#000000'
          break;
        case "FONT":
        this.selectColorValue = parentNode.color.toUpperCase()
        this.showType = ""
          break;
        case "DIV":
        this.showType = undefined
        this.selectColorValue = '#000000'
          break;
        default:
          break;
      }
      //上上级
      // console.log('上上级', parentNode.parentNode.nodeName !== 'DIV');
      if (parentNode.parentNode.nodeName !== 'DIV') {
        if (parentNode.parentNode.nodeName == 'B') {
          this.showType = 'textStrong'
        }
        if (parentNode.nodeName == "FONT") {
          this.selectColorValue = parentNode.color.toUpperCase()
        }
      }
    },