代码改变世界

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)
                        }