如何在contenteditable中的插入符号处输入字符？

Question

How do I input a character, with either JQuery or plain JavaScript, as if it had been typed?

I have a contenteditable section, and am intercepting user input in order to replace certain characters (for example straight quotes with curly ones). I have the following JQuery to intercept a character, but am not sure of the best way to input the new character.

$('.editor').keypress(function(e) {
    console.log(e.which);
    if (e.which === 39) {
        e.preventDefault();
        // replace with curly quotes
    }
});

Answer 1

What about document.execCommand:

$('.editor').keypress(function(e) {
  console.log(e.which);
  if (e.which === 39) {
    e.preventDefault();
    document.execCommand('insertHTML', false, 'String To Insert');
  }
});

insertHTML doesn't work in IE so use:

document.selection.createRange().pasteHTML('html to insert');

A list of commands and examples can be found at: https://developer.mozilla.org/en-US/docs/Rich-Text_Editing_in_Mozilla

---

PS I think e.which will report 0 in certain browsers so do something like:

var code = e.keyCode || e.which;

Answer 2

You can do

$('.editor').keypress(function(e) {
    console.log(e.which);
    if (e.which === 39) {
        e.preventDefault();
        $(this).text(function(index, text){
            return text.replace(/"/gi, '-'); // <--Change this to replace the " with what you need.
        });
    }
});