Javascript 如何在键入时格式化contenteditable div？

我正在尝试编写一个函数，允许contenteditable div在用户键入div时进行一些自动格式化。到目前为止，我只设法使其在IE中工作。有人可以帮助我吗

function formatOnKeyUp(){
    if (window.getSelection) {
        // ???????
    } else if (document.selection) {
        cursorPos=document.selection.createRange().duplicate();
        clickx = cursorPos.getBoundingClientRect().left; 
        clicky = cursorPos.getBoundingClientRect().top;
    }

    text = document.getElementById('div1').innerHTML;
    text = text.replace(/this/gm, "<i>this</i>");
    // .... some other formating here...
    document.getElementById('div1').innerHTML = text;

    if (window.getSelection) {
        // ????????
    } else if (document.selection) {
        cursorPos = document.body.createTextRange();
        cursorPos.moveToPoint(clickx, clicky);
        cursorPos.select();
    }
}

函数formatOnKeyUp（）{
if（window.getSelection）{
// ???????
}else if（文档选择）{
cursorPos=document.selection.createRange（）.duplicate（）；
单击X=cursorPos.getBoundingClientRect（）.left；
clicky=cursorPos.getBoundingClientRect（）.top；
}
text=document.getElementById（'div1'）.innerHTML；
text=text.replace（/this/gm，“this”）；
//……这里还有其他一些形式。。。
document.getElementById（'div1'）。innerHTML=text；
if（window.getSelection）{
// ????????
}else if（文档选择）{
cursorPos=document.body.createTextRange（）；
光标移动点（点击X，点击Y）；
cursorPos.select（）；
}
}

对于Microsoft的JScript来说，光标位置和文本范围看起来很特殊

如果要替换某人键入的文本，为什么需要该代码？

可以使用“我的库”中的，它在选择边界处使用不可见的标记元素。我还建议在某段时间的keboard不活动后进行更换，而不是在每次

keyup

事件中：

function formatText(el) {
    // Save the selection
    var savedSel = rangy.saveSelection();

    // Do your formatting here
    var text = el.innerHTML.replace(/this/gm, "<i>this</i>");
    el.innerHTML = text;

    // Restore the original selection 
    rangy.restoreSelection(savedSel);
}

var keyTimer = null, keyDelay = 500;

document.getElementById('div1').onkeyup = function() {
    if (keyTimer) {
        window.clearTimeout(keyTimer);
    }
    keyTimer = window.setTimeout(function() {
        keyTimer = null;
        formatText(document.getElementById('div1'));
    }, keyDelay);
};

函数格式文本（el）{
//保存所选内容
var savedSel=rangy.saveSelection（）；
//在这里进行格式化
var text=el.innerHTML.replace（/this/gm，“this”）；
el.innerHTML=文本；
//恢复原始选择
rangy.restoreSelection（savedSel）；
}
var keyTimer=null，keyDelay=500；
document.getElementById（'div1'）。onkeyup=function（）{
if（按键计时器）{
窗口清除超时（键定时器）；
}
keyTimer=window.setTimeout（函数（）{
keyTimer=null；
formatText（document.getElementById（'div1'））；
}，按键延迟）；
};

为什么不使用现成的编辑器，让您可以根据自己的喜好格式化文本？签出我需要它的格式自动作为用户类型，而不是作为用户点击某些按钮。此外，这是整个应用程序的一部分。第三方所见即所得编辑器不是我想要的。因为我需要格式化键入的文本。我在写一些类似html编辑器的东西。当有人输入时，比如说，我希望在用户完成输入的那一刻它就变成不同的颜色。@Marcel:谢谢：）现在只需要完成记录和测试这个愚蠢的东西。嗨，Tim，我怀疑Firefox版本中有一些bug。有什么渠道可以把我的发现反馈给你吗？好的，我希望这能有所帮助。在Firefox中，脚本无法呈现以下情况：这是要键入的区域。请注意，您专有的span标记就在标记后面。类似的问题也会出现在我们身上。错误消息是“索引或大小为负数或大于允许的数量”代码：“1[Break on this error]var endNode=ec.childNodes[eo-1]；”@Kelly:理想的做法是在项目错误跟踪器上提交错误：。我会尽快看一看。