javascript - How to format contenteditable div as you type? - Stack Overflow

admin管理员组

文章数量:1418637

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

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

• javascript
• html
• contenteditable

Share Improve this question Follow edited Oct 29, 2010 at 9:01 Marcel Korpel 21.8k66 gold badges6262 silver badges8080 bronze badges asked Oct 29, 2010 at 7:02 Kelly LimKelly Lim 6511 silver badge44 bronze badges 2

• Why not use readily available editors already giving you the possibility to format text to your liking? Check out tinymce.moxiecode. – Dennis G Commented Oct 29, 2010 at 7:26
• I need it to format automatically as the user type, not as user click certain button. Moreover, this is part of the entire application. A third party WYSIWYG editor is not what I'm after. – Kelly Lim Commented Oct 29, 2010 at 7:43

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

The cursor position and text range stuff looks particular to Microsoft's JScript.

If you're replacing text as someone types, why do you need that code?

本文标签： javascriptHow to format contenteditable div as you typeStack Overflow