HTML注释（选择，高亮，删除格式）

Question

我工作的一个跨浏览器基于网络的注解工具集，它允许用户选择网页

• HIGHLIGHT的任何部分，如果您选择：

约翰<李>大< /李> <李>转储< /李>

结果

<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>

• 删除格式：如果您选择：

john

从

<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>

结果

<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>

• 撤销/重做：好的，有特色

为了能够撤销和重做动作进行

我有一个部分解决了突出

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编辑器有很多相似之处，所以我在google关闭编辑器中查看ckeditor的代码和（广泛地）要么。我已经放弃了希望，因为他们只在可编辑的iframe中工作。我的要求之一是不允许用户更改原始文本，但只能添加自己的注释（高亮显示，内联注释等）。

我很想在这里把你所有的意见都告诉我，如果可能的话，指点一下正确的方向。

--Choesang

Answer 1

我觉得你还是可以使用“富文本编辑器”的方式（iframe），然后尝试捕获“onkeypress”，“onkeydown”和其他交互事件来停止默认行为（编辑文档）。

Answer 2

这里有一个很好的资源，帮助我用类似的东西：http://www.quirksmode.org/dom/execCommand.html

从第一页链接作为一个例子：

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

Answer 3

你会发现在论坛上的解决方案：http://cksource.com/forums/viewtopic.php?f=11&t=15659

为了清楚起见，我将下面的代码：

// 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); 
    } 
} 
})(); 

，并在你的JavaScript，请拨打如下

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

以上主要提供了可编辑的区域（iframe），它同时只读（不能从键盘输入）。它完全满足我所需的所有功能。我不必关心如何实现：突出显示，删除格式，撤消和重做。一切都被照顾ckeditor :)