Iframe JS rich text editor questions

Question

I have created an iframe rich text editor and would like to know the following:

How can I press a key down and not have it be added to the text editor. Ex press down return or enter and not have the break be added to the text editor. ??

and

How can I get the position of where the writing thing is. Basically how can i figure out how manny characters are behind the blinking thing the text comes out of (not sure what it's called)?

I would like to be able to type: "123| test 32" and have my writing thing where | is and know that it is 3 characters into it. more EX "12345|678" returns 5. "1234|" returns 4

I don't need you to write out an entire function, just please could someone point me in the right direction.

Thanks.

score 1 · Answer 1 · answered Jun 03 '11 at 15:29

You need to capture every key pressed during all the edition of your text, and evaluate everyone. The problem is that can be very slow, and you may wait much time from key pressed to key pressed.

Other solution could be write everything in a kind of buffer, and then, when you finish the edition, parse all the text and try to figure out which keys are not editing ones. You can do this with special characters, for example.

It's a good question.

score 0 · Answer 2 · edited May 23 '17 at 12:12

To prevent a keypress from inserting a character into the editor content, add a listener for the keypress event to the iframe's document and call the event's preventDefault() method (or set the returnValue to false in IE < 9):

var iframe = document.getElementById("your_iframe_id");
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

if (iframeDoc.addEventListener) {
    iframeDoc.addEventListener("keypress", function(e) {
        e.preventDefault();
    }, false);
} else if (iframeDoc.attachEvent) {
    iframeDoc.attachEvent("onkeypress", function(e) {
        e.returnValue = false;
    });
}

To get the position of the caret in terms of the character offset within the whole editable content, you can use the function below, adapted from this answer.

function getCaretCharacterOffset(iframe) {
    var win = iframe.contentWindow, doc = win.document;
    var caretOffset = 0;
    if (typeof win.getSelection != "undefined") {
        var range = win.getSelection().getRangeAt(0);
        var preCaretRange = range.cloneRange();
        preCaretRange.selectNodeContents(element);
        preCaretRange.setEnd(range.endContainer, range.endOffset);
        caretOffset = preCaretRange.toString().length;
    } else if (typeof doc.selection != "undefined" && doc.selection.type != "Control") {
        var textRange = doc.selection.createRange();
        var preCaretTextRange = doc.body.createTextRange();
        preCaretTextRange.moveToElementText(element);
        preCaretTextRange.setEndPoint("EndToEnd", textRange);
        caretOffset = preCaretTextRange.text.length;
    }
    return caretOffset;
}

alert( getCaretCharacterOffset(iframe) );

Iframe JS rich text editor questions

2 Answers2