contentEditable
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)
}
赞 (0)
