MarkItUp! continuous preview refresh without hitting enter

Question

I'm using MarkItUp (http://markitup.jaysalvat.com/) and can't really figure out how to get it to continuously update the preview pane as each character is typed (or even when a 'space' is encountered). By default it refreshes the preview pane only when the enter key is hit.

Is there any way to customize this behavior? The documentation mentions a previewAutoRefresh key, but setting it results in the update-on-enter thing, not any faster.

Thanks!

Almsgiver

Answer 1

Use the same technique as in this question.

$(".mymarkitupclass").keyup(function(){
    $('a[title="Preview"]').trigger('mousedown');
});

Note that this will send a new request to your webserver on every keypress, so if you have a lot of users, this'll be a lot of hits.

Chick

Answer 2

Very late but a better solution is to start a timer (1 sec) for each keypress so that the preview is done only once, when the user do a pause (this code snippet used JQuery timer plugin):

    $('#markitup').keydown(function() {
    $(this).stopTime();
    $(this).oneTime(1000, function() { $('a[title="Preview"]').trigger('mouseup'); });
});

For more detail you can see the excellent post on coding the wheel Syntax highlighting talking about textarea preview.

Stagg

This throws: Uncaught TypeError: Object [object Object] has no method 'stopTime' (and I have jQuery timer plugin -> raw.github.com/jbrooksuk/jQuery-Timer-Plugin/master/… – Stiver

I'm using an old jquery timer plug-in, I've copied the script here pastebin.com/g2dY6hzs – Stagg

Answer 3

previewAutoRefresh is on by default.

The preview is refreshed at any markup insertion (or Enter key pressed). The content of the preview is sent by ajax to a server side parser to render the markup language (textile, markdown, bbcode etc). Doing this operation on every key stroke is almost impossible (slow and heavy).

The markItUp! built-in preview is just a helper. You can disable it and code your own preview, using a client side script (Showdown for example) as you would have to do with a regular textarea.

:)

Erythroblast

you described what MarkItUp is. It's on the website. How does this help? – Almsgiver