打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
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)
                        }

 

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
基于HTML5打造的一款别踩白板小游戏
javascript中的NodeType、NodeValue、NodeName实例测试
js中的节点遍历+类数组对象
JavaScript 节点及层级操作
JavaScript中Element与Node的区别,children与childNodes的区别
深入理解javascript中的动态集合
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服