富文本编辑器的毛毛雨

 

 

 

 

 self: any = ''

  range: any = ''

  textContent: any = ''

  //失去焦点时获取光标的位置

  getblur() {

    this.self = window.getSelection()

    this.range = this.self.getRangeAt(0)

    this.range.deleteContents()

  }

  insertHtmlAtCaret(html) {

    if (window.getSelection) {

      // IE9 and non-IE

      if (this.self.getRangeAt && this.self.rangeCount) {

        var el = document.createElement('div')

        el.innerHTML = html

        var frag = document.createDocumentFragment(),

          node,

          lastNode

        while ((node = el.firstChild)) {

          lastNode = frag.appendChild(node)

        }

        this.range.insertNode(frag)

        // Preserve the selection

        if (lastNode) {

          this.range = this.range.cloneRange()

          this.range.setStartAfter(lastNode)

          this.range.collapse(true)

          this.self.removeAllRanges()

          this.self.addRange(this.range)

        }

      }

    } else if ((document as any).selection && (document as any).selection.type != 'Control') {

      // IE < 9

      ;(document as any).selection.createRange().pasteHTML(html)

    }

    this.textContent = document.getElementById('fxAnswer').innerHTML //这个也很重要。因为如果不写可能就会覆盖了原来内容替换成你添加的。或者是干脆不显示了。textContent是全局变量是你输入的内容。

  }

  chose(item) {

    this.isXontent = false

    // `<span contenteditable="false" style="border:1px solid #e5e5e5;padding:3px 5px;border-radius:3px">` +

    // this.insertHtmlAtCaret(document.getElementById('fxAnswer').innerHTML)

    this.insertHtmlAtCaret(

      `<span contenteditable="false" style="border:1px solid #e5e5e5;padding:3px 5px;border-radius:3px">` +

        item.data +

        `</span>`,

    )

    console.log(this.textContent)

  }

 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~分割线~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

据说富文本编辑器坑很多，我也大致不会自己去写，比如说要用cavans把字画出来，还有换行等等的bug啥的，比如说span会出bug，要用img，标签转文本。。。我先不管了，长一记知识得了