How do I update the live preview of MarkdownDeep when adding text from jQuery .val()?

Question

I'm currently evaluating MarkdownDeep for use on my website. Above the editor I display a list of images the user previously uploaded. To insert the image (which is wrapped in a link to the larger version) into the <textarea>, the user clicks the image. However, the live preview doesn't show the image until the user adds additional input in the <textarea>. Is it possible to update the live preview through jQuery?

Here's the code I'm using to insert the image:

$("img").click(function () {
    var imgsrc = $(this).attr('src');
    var content = $('textarea').val();
    $('textarea').val(content + '<a href="' + imgsrc + '"><img src="' + imgsrc + '" width="50" height="50" /></a>');
});

Answer 1

I figured it out. If we bind the focus event in the MarkdownDeepEditor.js file, then set the focus to the textarea, the preview will update.

Add the following after line 539 in MarkdownDeepEditor.js: (you should see the other BindEvents.)

BindEvent(textarea, "focus", function(){ed.onMarkdownChanged();});

In my html, I'll add the following code:

$("img").click(function () {
    var imgsrc = $(this).attr('src');
    var content = $('textarea').val();
    $('textarea').val(content + '<a href="' + imgsrc + '"><img src="' + imgsrc + '" width="50" height="50" /></a>');
    $('textarea.mdd_editor').focus();
});