选词填空

image.png

通过div的contentEditable属性 进行自定义
在光标后插入input

 <div class="sub-box">
        <div
          ref="value"
          class="subContent"
          id="content"
          outline="none"
          :contentEditable="true"
      
          @click="onclick"
          @keyup.delete="deleteValue"
        ></div>
        <button class="sub-bottom" @click="addValue">
          <div class="line"></div>
          <div class="line-bottom-box">
            <img class="add" src="../../../assets/gapFilling/add.png" alt="" />
            <div class="line-bottom-add">增加填空</div>
            <div class="fill-num">
              <span class="red-color">{{ addNum }}</span
              >/10
            </div>
          </div>
        </button>
      </div>

 // 插入input
    addValue() {
      let dom = document.getElementById('content')
      dom.focus()
      if (this.addNum < 10) {
        this.insertHtmlAtCaret()
        this.$nextTick(() => {
          this.addNum++
        })
      }
    },
  //在元素后插入新元素
    insertAfter(newElement, targetElement) {
      let parent = targetElement.parentNode
      if (parent.lastChild == targetElement) {
        parent.appendChild(newElement)
      } else {
        parent.insertBefore(newElement, targetElement.nextSibling)
      }
    },
 // 光标处添加input
    insertHtmlAtCaret() {
      let sel
      let input = document.querySelectorAll('.add-input')
      let el = document.createElement('input')
      this.num = input.length
      // 是点击获取得焦点
      if (this.clickFlag) {
        // 光标在input上
        if (this.rangeInutFlag && input.length !== 0) {
          el.setAttribute('type', 'text')
          el.setAttribute('placeholder', '输入正确答案')
          el.setAttribute('class', 'add-input')
          el.classList.add('add-input', `add-input${this.num}`)
          this.$nextTick(() => {
            el.focus()
          })
          let clickInput = document.getElementsByClassName(
            `add-input${this.rangeInputNum}`
          )

          this.insertAfter(el, clickInput[0])
          this.rangeInputNum = this.num - 1
          this.clickFlag = false
        } else {
          if (window.getSelection) {
            sel = window.getSelection()
            if (sel.getRangeAt(0) && sel.rangeCount) {
              let range = sel.getRangeAt(0)
              console.log(range, 'range')
              let el = document.createElement('input')
              el.setAttribute('type', 'text')
              el.setAttribute('placeholder', '输入正确答案')
              el.setAttribute('class', 'add-input')
              el.classList.add('add-input', `add-input${this.num}`)
              this.$nextTick(() => {
                // 添加完后 input自动获取焦点
                el.focus()
              })
              this.rangeInputNum = this.num - 1
              this.clickFlag = false
              range.insertNode(el)
            }
          }
        }
      } else {
        el.setAttribute('type', 'text')
        el.setAttribute('placeholder', '输入正确答案')
        el.setAttribute('class', 'add-input')
        el.classList.add('add-input', `add-input${this.num}`)
        this.$nextTick(() => {
          el.focus()
        })
        this.rangeInputNum = this.num - 1
        this.clickFlag = false
        let clickInput = document.getElementsByClassName(
          `add-input${this.rangeInputNum}`
        )
        this.insertAfter(el, clickInput[0])
      }

      // if (event.keyCode === 13) {
      //  el.classList.add('blue-input')
      // }
      // else if (document.selection && document.selection.type != 'Control') {
      //   // IE < 9
      //   document.selection.createRange().pasteHTML(html)
      // }
    },
   // 删除input
    deleteValue() {
      let input = document.querySelectorAll('.add-input')
      this.addNum = input.length
    },
 // 点击
    onclick() {
      // 通过判断是点击input或者文字处 再点击“添加input” 还是点击“添加input”紧接再点击“添加input”
      this.clickFlag = true
      if (document.activeElement.className.slice(0, 9) === 'add-input') {
        this.rangeInutFlag = true
        this.rangeInputNum = document.activeElement.className.slice(19, 20)
      } else {
        this.rangeInutFlag = false
      }
      console.log(
        document.activeElement.className,
        this.rangeInputNum,
        'this.rangeInputNum'
      )
    },

多多指教~