javascript - HTML 注释(选择、突出显示、删除格式)

Question

我正在开发一个跨浏览器的基于 Web 的注释工具集，它允许用户选择网页的任何部分

• 突出显示，如果您选择:

john is <li>big</li> <li>dump</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>

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

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>

• UNDO/REDO:很高兴有功能

能够撤消和重做已执行的操作

我有一个突出显示的部分解决方案

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";
} 

由于我的要求与富文本编辑器有很多相似之处，所以我研究了 ckeditor 的代码，并(广泛地)研究了 google 闭包编辑器的代码。我已经放弃了对它们的希望，因为它们只能在可编辑的 iframe 中工作。我的要求之一是不允许用户更改原始文本，只能添加自己的注释(突出显示、内联注释等)。

我很乐意在这里提出您的所有意见，并在可能的情况下为我指明正确的方向。

--初生

Answer 1

我认为您仍然可以使用“富文本编辑器”方式 (iframe)，但随后 try catch “onkeypress”、“onkeydown”和其他交互事件以停止默认行为(编辑文档)。