Displaying preview panel automatically in markitup! editor

Question

I'm using the markitup! as a markdown editor (example).

Currently, I need to press the preview button (green tick) to display the preview panel.

I would like the preview to be displayed automatically - how can I achieve this?

Answer 1

I have no experience with this editor but

$('a[title="Preview"]').trigger('mouseup');

called after the editor loads seems to do what you want.

Answer 2

Just in case anybody else is following the accepted answer and runs into problems:

$('a[title="Preview"]').trigger('mousedown');

worked for me (while 'mouseup' didn't). Maybe they changed the behaviour in the newest version of markItUp! (v1.1.7)?

Answer 3

Mark's answer worked. For the sake of completeness, here's where I added his code:

<script type="text/javascript" >
$(document).ready(function()    {
    $('#markdown').markItUp(myMarkdownSettings);
    $('a[title="Preview"]').trigger('mouseup');
});
</script>

Answer 4

Or you could do it by hacking it a little : in the source file add

autoShowPreview : false,

as a field in the options object so it will look like :

options = { id:                     '',
                nameSpace:              '',
                root:                   '',
                previewHandler:         false,
                previewInWindow:        '', // 'width=800, height=600, resizable=yes, scrollbars=yes'
                previewInElement:       '',
                previewAutoRefresh:     true,
                autoShowPreview :       true,  //custom option here : 
                previewPosition:        'after',
                previewTemplatePath:    '~/templates/preview.html',
                previewParser:          false,
                previewParserPath:      '',
                previewParserVar:       'data',
                resizeHandle:           true,
                beforeInsert:           '',
                afterInsert:            '',
                onEnter:                {},
                onShiftEnter:           {},
                onCtrlEnter:            {},
                onTab:                  {},
                markupSet:          [   { /* set */ } ]
            };

Then near the end of the document around line 610 there is the call to the init(); function. You can change it like this :

init();
if(options.autoShowPreview){
     preview();
     refreshPreview();
}

You can always disable it if not needed by modifying our custom prop at initialization time.