如何在输入时格式化contenteditable div？ [英] How to format contenteditable div as you type?

问题描述

我正在尝试编写一个函数，让用户在div中输入内容时，可以使用contenteditable div来进行一些自动格式化。到目前为止，我只能使它在IE中工作。任何人都可以帮助我？

pre $函数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>）;
// ....一些其他格式在这里...
document.getElementById（'div1'）。innerHTML = text;

if（window.getSelection）{
// ????????
} else if（document.selection）{
cursorPos = document.body.createTextRange（）;
cursorPos.moveToPoint（clickx，clicky）;
cursorPos.select（）;



$ div $解析方案

你可以在我的选择保存和恢复模块中使用。 //code.google.com/p/rangy/rel =nofollow> Rangy 库，它在选择边界使用不可见的标记元素。我还建议在一段时间的keboard不活动之后而不是每个 keyup 事件中进行更换：

  function formatText（el）{
 //保存选区
 var savedSel = rangy.saveSelection（）; 
 
 //在此处设置格式
 var text = el.innerHTML.replace（/ this / gm，< i> this< / i>）; 
 el.innerHTML = text; 
 
 //恢复原始选择
 rangy.restoreSelection（savedSel）; 
} 
 
 var keyTimer = null，keyDelay = 500; （keyTimer）{
 window.clearTimeout（keyTimer）; 
 
 document.getElementById（'div1'）。onkeyup = function（）{
 if 
} 
 keyTimer = window.setTimeout（function（）{
 keyTimer = null; 
 formatText（document.getElementById（'div1'））; 
}，keyDelay ）; 
}; 
  

I'm trying to write a function that allows a contenteditable div to do some auto formatting while the user is typing in the div. So far I only manage to make it work in IE. Anyone can help me?

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

解决方案

You could use the selection save and restore module in my Rangy library, which uses invisible marker elements at the selection boundaries. I'd also suggest doing the replacement after a certain period of keboard inactivity rather than on every keyup event:

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

这篇关于如何在输入时格式化contenteditable div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！