contentEditable
2020-08-24 15:58 改吧 阅读(340) 评论(0) 编辑 收藏 举报function getDivContent(wrapper){ var textareaText = ''; for (var i = 0; i < wrapper.childNodes.length; i++) { if (wrapper.childNodes[i].nodeName !== '#text') { if (wrapper.childNodes[i].innerHTML == '<br>') { textareaText += wrapper.childNodes[i].innerHTML } else { textareaText += wrapper.childNodes[i].innerText.replace(/\n$/,'') + ((i == wrapper.childNodes.length - 1|| wrapper.childNodes[i].innerText=='\n') ? '' : '<br>') } } else { textareaText += wrapper.childNodes[i].nodeValue + ((i == wrapper.childNodes.length - 1 || wrapper.childNodes[i+1].nodeName=='BR') ? '' : '<br>') } } return textareaText }
在光标所在位置插入文本
if (!selection) { selection = getSelection(); } if (lastEditRange) { selection.removeAllRanges() selection.addRange(lastEditRange) // 判断选定对象范围是编辑框还是文本节点 if (selection.anchorNode.nodeName != '#text') { if (selection.anchorNode == addLinkFrame.inputWrapper) { console.log(0) addLinkFrame.inputWrapper.insertBefore(html, addLinkFrame.inputWrapper.childNodes[selection.anchorOffset]) } else if (addLinkFrame.inputWrapper.childNodes.length == 0 || (addLinkFrame.inputWrapper.childNodes.length == 1 && !addLinkFrame.inputWrapper.childNodes[0].innerText)) { console.log(1) addLinkFrame.inputWrapper.innerHTML = ''; addLinkFrame.inputWrapper.appendChild(html) } else if (addLinkFrame.inputWrapper.childNodes.length > 0) { console.log(2) // 如果文本框的子元素大于0,则表示有其他元素,则按照位置插入表情节点 for (var i = 0; i < addLinkFrame.inputWrapper.childNodes.length; i++) { if (addLinkFrame.inputWrapper.childNodes[i] == selection.anchorNode) { if (selection.anchorOffset == 0) { addLinkFrame.inputWrapper.childNodes[i].prepend(html) } } else { if (selection.anchorOffset == 0) { selection.anchorNode.prepend(html) } } } } // else { // console.log(2) // // 否则直接插入一个表情元素 // // $(addLinkFrame.inputWrapper).append(html) // addLinkFrame.inputWrapper.appendChild(html) // } // 创建新的光标对象 var range = document.createRange(); // 光标对象的范围界定为新建的表情节点 range.selectNodeContents(html) // 光标位置定位在表情节点的最大长度 range.setStart(html, html.length) // 使光标开始和光标结束重叠 range.collapse(true) // 清除选定对象的所有光标对象 selection.removeAllRanges() // 插入新的光标对象 selection.addRange(range) } else { console.log(3) // 如果是文本节点则先获取光标对象 var range = selection.getRangeAt(0) // 获取光标对象的范围界定对象,一般就是textNode对象 var textNode = range.startContainer; // 获取光标位置 var rangeStartOffset = range.startOffset; // 文本节点在光标位置处插入新的表情内容 textNode.insertData(rangeStartOffset, html.innerText) // 光标移动到到原来的位置加上新内容的长度 range.setStart(textNode, rangeStartOffset + html.length) //光标开始和光标结束重叠 range.collapse(true) // 清除选定对象的所有光标对象 selection.removeAllRanges() // 插入新的光标对象 selection.addRange(range) } // 无论如何都要记录最后光标对象 lastEditRange = selection.getRangeAt(0) } else { console.log(4) // G.error('请选中你所需要添加光标的位置'); var allhtml = $(addLinkFrame.inputWrapper).text() + html.innerText; $(addLinkFrame.inputWrapper).text(allhtml) }