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,标签转文本。。。我先不管了,长一记知识得了