HTML 주석 (선택, 강조, 형식을 제거)

Question

당신이 선택하면 내가, 사용자가 웹 페이지

• 하이라이트의 어떤 부분을 선택할 수있는 크로스 브라우저 웹 기반 주석 도구 세트, 일하고

  :

존은 < 리에게 있습니다 > 큰 </리 > < 리 > 덤프 </리 >

결과

<span style="background-color: rgb(106, 168, 79)">john is</span> <li><span style="background-color: rgb(106, 168, 79)">big</span></li> <li><span style="background-color: rgb(106, 168, 79)">dump</span></li>

• REMOVE 포맷 : 당신이 선택하는 경우 :

john

<span style="background-color: rgb(106, 168, 79)"></span> john <span style="background-color: rgb(106, 168, 79)">is</span> <li><span style="background-color: rgb(106, 168, 79)">big</span></li> <li><span style="background-color: rgb(106, 168, 79)">dump</span></li>

결과

<span style="background-color: rgb(106, 168, 79)">john is</span> <li><span style="background-color: rgb(106, 168, 79)">big</span></li> <li><span style="background-color: rgb(106, 168, 79)">dump</span></li>

행 691,363,210

• 취소/다시 실행 : 취소 할 수 있으려면 기능을

을 가지고

function highlight(colour) { 
var range, sel; 
if (document.selection && (!window.getSelection)) { 
// IE case 
    range = document.selection.createRange(); 
    range.execCommand("BackColor", false, colour); 
} else if (window.getSelection) {  
// Non-IE case 
    sel = window.getSelection(); 
    if (sel.getRangeAt) { 
     range = sel.getRangeAt(0); 
    } 
//without designmode=on, you can't highlight the selected html (chrome) 
    document.designMode = "on"; 
    if (range) { 
     sel.removeAllRanges(); 
     sel.addRange(range); 
    } 
    // HiliteColor avoids FF3.5 from painting the background of the whole block 
    if (!document.execCommand("HiliteColor", false, colour)) { 
     document.execCommand("BackColor", false, colour); 
    } 
    document.designMode = "off"; 
} 

}

을 강조하기위한 조치를

가 나는 부분적인 해결책을 실행 다시 실행하는 것이 좋은

내 요구 사항은 richtext 편집기와 많은 유사점을 지녔기 때문에 ckeditor의 코드와 Google 클로저 편집에서 (광범위하게) 살펴 보았습니다. 또는. 나는 편집 가능한 iframe에서만 작업하기 때문에 둘 다 희망을 포기했습니다. 내 요구 사항 중 하나는 사용자가 원래 텍스트를 변경할 수 없으며 주석 (강조, 인라인 노트 등)을 추가하는 것입니다.

나는 당신의 의견을 모두 듣고 가능한 한 올바른 방향으로 나를 가리 키기를 바랍니다.

--Choesang

Answer 1

나는 여전히 수 있다고 생각이 "서식있는 텍스트 편집기"방식 (iframe)을 사용하지만 "onkeypress", "onkeydown"및 기타 대화식 이벤트를 catch하여 기본 동작 (문서 편집)을 중지하십시오.

Answer 2

여기에 비슷한 뭔가 나에게 도움이 좋은 자원이다 : http://www.quirksmode.org/dom/execCommand.html

예를 들어 첫 번째 페이지에서 링크 :

http://www.quirksmode.org/dom/execCommand/

Answer 3

당신은 포럼의 솔루션을 찾을 수 있습니다 :

// Temporary workaround for providing editor 'read-only' toggling functionality. 
    (function() 
    { 
    var cancelEvent = function(evt) 
    { 
    evt.cancel(); 
    }; 

CKEDITOR.editor.prototype.readOnly = function(isReadOnly) 
{ 
    // Turn off contentEditable. 
    this.document.$.body.disabled = isReadOnly; 
    CKEDITOR.env.ie ? this.document.$.body.contentEditable = !isReadOnly 
    : this.document.$.designMode = isReadOnly ? "off" : "on"; 

    // Prevent key handling. 
    this[ isReadOnly ? 'on' : 'removeListener' ]('key', cancelEvent, null, null, 0); 
    this[ isReadOnly ? 'on' : 'removeListener' ]('selectionChange', cancelEvent, null, null, 0); 

    // Disable all commands in wysiwyg mode. 
    var command, 
    commands = this._.commands, 
    mode = this.mode; 

    for (var name in commands) 
    { 
    command = commands[ name ]; 
    isReadOnly ? command.disable() : command[ command.modes[ mode ] ? 'enable' : 'disable' ](); 
    this[ isReadOnly ? 'on' : 'removeListener' ]('state', cancelEvent, null, null, 0); 
    } 
} 
})(); 

와 자바 스크립트의

이

// Turn CKEditor into 'ready-only' mode or vice versa. 
CKEDITOR.instances.editor1.readOnly(true); 
CKEDITOR.instances.editor1.readOnly(false); 

을 다음과 같이 호출 명확성을 위해서 http://cksource.com/forums/viewtopic.php?f=11&t=15659

을, 나는 아래의 코드를 삽입하고

위는 기본적으로 편집 가능한 영역 (iframe)이며 읽기 전용 시간 (키보드에서 입력 할 수 없음)을 제공합니다. 그것은 내가 원하는 모든 기능을 완벽하게 수행합니다. 강조 표시, 형식 제거, 실행 취소 및 다시 실행 등 구현 방법에 신경 쓸 필요가 없습니다. 모든게 ckeditor 신경 쓰여 :)