我可以通过创建跨度来突出显示文本,但是当我在高亮的跨度文本中使用透明的背景色创建跨度时,它仍然继承父标记的背景色,而不是采用透明的背景色。 但是,文本将采用任何不透明的颜色。 我基于http://help.dottoro.com/ljcvtcaw.php突出显示文本 尤其是http://help.dottoro.com/external/examples/ljcvtcaw/execCommand_4.htm。
我过去也曾使用document.execCommand('ForeColor',false,yellow),它非常直观,可以删除或合并span标签,但从未删除过以此方式创建的span标签。
function Highlight(color) {
document.designMode = "on";
var sel = window.getSelection();
sel.removeAllRanges();
var range = document.createRange();
range.setStart(editor.startContainer, editor.startOffset);
range.setEnd(editor.endContainer, editor.endOffset);
sel.addRange(range);
if (!sel.isCollapsed) {
var range = sel.getRangeAt(0);
var startContainer = range.startContainer;
var startOffset = range.startOffset;
var endContainer = range.endContainer;
var endOffset = range.endOffset;
if(startContainer == endContainer){
ColorizeNodeFromTo(startContainer, color, startOffset, endOffset);
}
else {
if(startContainer.firstChild){
var startLeaf = startContainer.childNodes[startOffset];
}
else {
var startLeaf = GetNextLeaf(startContainer);
ColorizeLeafFromTo(startContainer, color, startOffset, -1);
}
if(endContainer.firstChild){
if(endOffset > 0){
var endLeaf = endContainer.childNodes[endOffset-1];
}
else{
var endLeaf = GetPreviousLeaf(endContainer);
}
}
else{
var endLeaf = GetPreviousLeaf(endContainer);
ColorizeLeafFromTo(endContainer, color, 0, endOffset);
}
while(startLeaf){
var nextLeaf = GetNextLeaf(startLeaf);
ColorizeLeaf(startLeaf, color);
if(startLeaf == endLeaf){
break;
}
startLeaf = nextLeaf;
}
}
}
解决方案
我回过头来,使用execCommand函数重构了代码。
if (!sel.isCollapsed) {
if (!document.execCommand("HiliteColor", false, color)) {
document.execCommand("BackColor", false, color);
}
}
这会动态创建和删除我想要的跨度。