Responsive Rich Editor Preview

Consider this Example. The essential bit is the JavaScript: function encodeInput(editor) { theText = editor.val(); theText = theText.replace(/\*\*\*(.*?)\*\*\*/, '

Solution 1:

You can use the HTML5 input event in most browsers and the propertychange event in IE < 9. These events fire immediately after the textarea's value is updated.

Here's an updated demo using these events:

http://jsfiddle.net/muWm2/1/

I've written about this in a few places on SO. Here are two of them:

• Catch only keypresses that change input?
• jQuery keyboard events

I would recommend against updating the preview on every single change to the textarea's value because it could quickly get unresponsive, which is a big no-no for user experience. I'd suggest "debouncing" the event, in this case waiting for a period of user inactivity (say half a second) before updating the preview. Here's an answer and a link that may help:

• How to trigger an onkeyup event that's delayed until a user pauses their typing?
• Debouncing Javascript Methods by John Hann

Solution 2:

You can bind() both the keyup and keydown events:

$editor.bind('keyup keydown', function() {
    encodeInput($(this));
});

I noticed that only the first occurrence was working, adding the g flag to the regex seemed to help, and for the purpose of the jsfiddle demo only, unchecking "normalize css" made the bold text appear.

http://jsfiddle.net/tuUym/3/

Solution 3:

Keypress fires when the key is pressed continously, so you have to bind it to keypress in order to see the result. And thats it.

http://jsfiddle.net/tuUym/4/

UPDATE: I see what you mean. Maybe you need an input poller? Check out the de obfuscated wmd code. That will help you achieve the lagless editor you aim for:

WMD Download

Share