DOM에서 추가 된 강조 표시를 제거하십시오.

Question

나는 a script from Tim Down을 사용하여 반전을 만듭니다. 이제 사용자가 브라우저 조치를 다시 클릭하여 제거해야합니다.

function makeEditableAndHighlight(colour) { 
    var range, sel = window.getSelection(); 
    if (sel.rangeCount && sel.getRangeAt) { 
     range = sel.getRangeAt(0); 
    } 
    document.designMode = "on"; 
    if (range) { 
     sel.removeAllRanges(); 
     sel.addRange(range); 
    } 
    // Use HiliteColor since some browsers apply BackColor to the whole block 
    if (!document.execCommand("HiliteColor", false, '#FFFF00')) { 
     document.execCommand("BackColor", false, '#FFFF00'); 
    } 
    if (!document.execCommand("HiliteColor", true, '#FFFF00')) { // Added this logic 
     document.execCommand("removeFormat", false, null); 
    } 
    document.designMode = "off"; 
} 

내 생각은 "HiliteColor"이 true을 반환하는 경우, 그것은 서식을 제거한다고했지만, 그것은 작동하지 않습니다 :

는 나는이 조각에 다른 if 문을 추가 할 수 있습니다 생각했다. 이견있는 사람?

편집 더 읽기를 수행 한 후, 나는 execCommand에서 부울 값을 반환 함께 할 아무것도하지 않는 것을 배웠다. 논리를 개선하여 배경색을 바꿀 수 있습니까? 심지어 할 수 있습니까?

Answer 1

나중에 액세스 할 수 있도록 선택한 범위를 "직렬화"하는 방법이 필요합니다.
This answer은 직렬화/직렬화를 수행하는 방법을 설명합니다.

코드는 다음과 같을 수 있습니다 :

var serializedRange; 

/* Serializes and returns the specified range 
* (ignoring it if its length is zero) */ 
function serializeRange(range) { 
    return (!range || ((range.startContainer === range.endContainer) 
         && (range.startOffset === range.endOffset))) 
      ? null : { 
       startContainer: range.startContainer, 
       startOffset: range.startOffset, 
       endContainer: range.endContainer, 
       endOffset:  range.endOffset 
      }; 
} 

/* Restores the specified serialized version 
* (removing any ranges currently seleted) */ 
function restoreRange(serialized) { 
    var range = document.createRange(); 
    range.setStart(serialized.startContainer, serialized.startOffset); 
    range.setEnd(serialized.endContainer, serialized.endOffset); 

    var sel = window.getSelection(); 
    sel.removeAllRanges(); 
    sel.addRange(range); 
} 

/* Hilites the currently selected range or removes the hilite 
* (if there is a previously serialized range) */ 
function toggleHilite() { 
    document.designMode = 'on'; 

    var sel = window.getSelection(); 
    if (serializedRange) { 
     /* There is a hilited range, let's remove the hilite */ 
     restoreRange(serializedRange); 
     serializedRange = null; 
     document.execCommand('removeFormat', false, null); 
     sel.removeAllRanges(); 
    } else { 
     /* There is no hilited range, so hilite 
     * the currently selected range (if any) */ 
     if (sel.rangeCount && sel.getRangeAt) { 
      document.execCommand('hiliteColor', false, '#FFFF00'); 
      serializedRange = serializeRange(sel.getRangeAt(0)); 
      // it is important to serialize the range *after* hiliting, 
      // because `execCommand` will change the DOM affecting the 
      // range's start-/endContainer and offsets. 
     } 
    } 

    document.designMode = 'off'; 
}