我无法让此代码完全正常运行。我注意到,当从上到下突出显示从下到上的文本时,结果会有所不同。
当我从下到上点亮时(或者从第4行开始突出显示到第2行,所以你突出显示了2.5行),我能够在某种程度上让它工作。
我的目标是让我的编辑器格式化突出显示的文本,无论是粗体,下划线,颜色等等。
以下是可编辑div中的HTML:
<div contenteditable="false" parentdiv="container" id="someID" style="z-index: 50; width: 207px; height: 124px; top: 285px; left: 151.99px; position: absolute; outline-color: rgb(255, 0, 0);" placeholder="double click to type">
<div class="divContent" contenteditable="false" placeholder="Type here" style="position: absolute; width: 100%; height: 100%; color: rgb(0, 0, 0); cursor: move; z-index: 2; outline-color: rgb(170, 170, 170); opacity: 1; border: 2px solid rgb(255, 0, 0);" haserror="1">
<span class="fontFormatContainer" style="font-family: Lato; font-size: 12pt; line-height: 1.3;">First line of text</span><br>
<span class="fontFormatContainer" style="font-family: Lato; font-size: 8pt; line-height: 1.3;">Developer</span><br>
<span class="fontFormatContainer" style="font-family: Lato; font-size: 10pt; line-height: 1.3;">Cell: (941) 405-8180</span><br>
<span class="fontFormatContainer" style="font-family: Lato; font-size: 10pt; line-height: 1.3;">Cell: (941) 405-1111</span><br>
<span class="fontFormatContainer" style="font-family: Lato; font-size: 10pt; line-height: 1.3;">Another line of text</span><br>
<span class="fontFormatContainer" style="font-family: Lato; font-size: 10pt; line-height: 1.3;">https://Some.URL.com/Registration.asp</span>
</div>
</div>
以下是我的代码:
var selection = window.getSelection();
if (!selection.isCollapsed) { // we have a non-zero length selection
var endNode = selection.focusNode;
var endOffset = selection.focusOffset;
if (endNode instanceof Text) { // if an element then offset = child node idx
endNode.splitText(endOffset);
}
var startNode = selection.anchorNode;
var startOffset = selection.anchorOffset;
if (startNode instanceof Text) {
startNode.splitText(startOffset);
startNode = startNode.nextSibling;
}
}
function filterFunction(node) {
if (node.id === 'ignore')
return NodeFilter.FILTER_REJECT;
return NodeFilter.FILTER_ACCEPT;
}
var nodeTypes = NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT;
var root = range.commonAncestorContainer;
var walker = document.createTreeWalker(root, nodeTypes, { acceptNode: filterFunction }, false);
walker.currentNode = startNode;
var nextNode = walker.currentNode;
//var html = [];
if (startOffset < endOffset) {
while (nextNode && nextNode !== endNode) {
if (nextNode.nodeType === Node.TEXT_NODE) {
if (nextNode.nodeValue.trim() !== '') {
switch (objStyle.val) {
case 'bold':
$(nextNode.parentElement).css(objStyle.attr).indexOf('700') !== -1 ? objStyle.val = 'normal' : objStyle.val = '700';
break;
case 'italic':
$(nextNode.parentElement).css(objStyle.attr).indexOf('italic') !== -1 ? objStyle.val = 'normal' : objStyle.val = objStyle.val;
break;
case 'underline':
$(nextNode.parentElement).css(objStyle.attr).indexOf('underline') !== -1 ? objStyle.val = 'none' : objStyle.val = objStyle.val;
break;
case 'line-through':
$(nextNode.parentElement).css(objStyle.attr).indexOf('line-through') !== -1 ? objStyle.val = 'none' : objStyle.val = objStyle.val;
break;
}
if (nextNode.nodeValue === nextNode.parentElement.innerText)
$(nextNode.parentElement).css(objStyle.attr, objStyle.val);
else {
var baseHTML = nextNode.parentElement.innerHTML;
baseHTML = baseHTML.replace(nextNode.nodeValue, '<span style="' + objStyle.attr + ':' + objStyle.val + '">' + nextNode.nodeValue + '</span>');
nextNode.parentElement.innerHTML = baseHTML; //nextNode.parentElement.innerHTML.replace(html[i], '');
}
}
}
nextNode = walker.nextNode();
}
} else {
while (nextNode && nextNode !== endNode) {
if (nextNode.nodeType === Node.TEXT_NODE) {
if (nextNode.nodeValue.trim() !== '') {
switch (objStyle.val) {
case 'bold':
$(nextNode.parentElement).css(objStyle.attr).indexOf('700') !== -1 ? objStyle.val = 'normal' : objStyle.val = '700';
break;
case 'italic':
$(nextNode.parentElement).css(objStyle.attr).indexOf('italic') !== -1 ? objStyle.val = 'normal' : objStyle.val = objStyle.val;
break;
case 'underline':
$(nextNode.parentElement).css(objStyle.attr).indexOf('underline') !== -1 ? objStyle.val = 'none' : objStyle.val = objStyle.val;
break;
case 'line-through':
$(nextNode.parentElement).css(objStyle.attr).indexOf('line-through') !== -1 ? objStyle.val = 'none' : objStyle.val = objStyle.val;
break;
}
if (nextNode.nodeValue === nextNode.parentElement.innerText)
$(nextNode.parentElement).css(objStyle.attr, objStyle.val);
else {
var baseHTML = nextNode.parentElement.innerHTML;
baseHTML = baseHTML.replace(nextNode.nodeValue, '<span style="' + objStyle.attr + ':' + objStyle.val + '">' + nextNode.nodeValue + '</span>');
nextNode.parentElement.innerHTML = baseHTML;
}
}
}
nextNode = walker.previousNode();
}
}