本文摘自PHP中文网,作者零下一度,侵删。
代码和特性在chrome49下测试有效。文本渲染的本质是对文本节点的渲染,通过浏览器内置的对象Range可以获得选择的起始点、与终止点
1 2 | var range = getRangeObject(); var start = range.startOffset,
end = range.endOffset; var startContainer = range.startContainer; var endContainer = range.endContainer;
|
getRangeObjec代码如下
1 2 3 4 5 6 7 8 | function getRangeObject(){ if (window.getSelection)
{ var selection = window.getSelection(); if (selection.rangeCount > 0)
{ return selection.getRangeAt(0);
}
} else if (document.selection)
{ return document.selection.createRange();
} return null;
};
|
起始点始终在左面,终止点始终在右面,不受选择方向的影响。
只有当起始点的开头或终止点的末尾是<br/>时,返回的不是文本节点,可以通过start,end确定br元素的位置分别是startContainer.childNodes[start],endContainer.childNodes[end-1]。返回的是文本节点start表示光标相对于起始文本节点所在的起始位置,end表示光标相对于终止文本节点所在的终止位置。
获得下一个文本节点的算法为
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | function getNextTextNode(startNode,dir = "nextSibling" ){
startNode = startNode[dir];
} while (true){ if (startNode == undefined){ if (unchangeNode == undefined){
} let parent = unchangeNode.parentElement;
unchangeNode = parent;
startNode = parent[dir];
} else if (startNode.nodeType == 3){
} else if (startNode.tagName == "BR" ){
startNode = startNode[dir];
} else if (startNode.nodeType == 1){ unchangeNode = startNode; if (dir == "previousSibling" ){
startNode = $(startNode).contents().last().get(0);
} else if (dir == "nextSibling" ){
startNode = $(startNode).contents().first().get(0);
} else {
}
} else {
}
} return startNode;
}
|
//上述函数用外部变量+while循环的方式取代递归,加入的保护机制减少误用、潜在bug导致极差的体验。
获得起始节点和结束节点之间的所有文本节点
1 2 3 4 5 6 7 8 | function getTextNodes(startTextNode,endTextNode){
let textNodeArray = [];
let node = startTextNode; while (true) {
node = getNextTextNode(node); if (node == endTextNode){ break ;
}
textNodeArray.push(node);
} return textNodeArray;
}
|
以上就是H5编辑器核心思想的实例分析的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
详细介绍HTML5响应式设计实现九宫格的示例代码(图)
HTML5 canvas绘制五角星的方法
用h5做出微信的支付过程的实现步骤
HTML5新增结构:html主体结构和非主体结构的介绍
HTML5怎么嵌入视频
h5文件异步上传
HTML5前景怎么样
介绍HTML5+canvas调用手机拍照功能实现图片上传(下篇)
bootstrap与HTML5的区别是什么
移动端h5中百度地图的click事件的介绍(代码示例)
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » H5编辑器核心思想的实例分析