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?

Pancake

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.

Imprint

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)?

Expiation

+1 worked for me, however this only does it when I add a 'new like' would love to see the update on every key entry. Gonna have to research how that's done. – Farnese

Interestingly trigger('mousedown') did not work for me, but trigger('mouseup') did. The markitup file has the version v 1.1.x in it – Crossman

As for 1.1.15 works again mouseup, not mousedown. – Sneck

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>

Pancake

Note that this answer is nearly 4 years old. Try Volker's answer above. If that doesn't work, try asking a new question. – Pancake

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.

Tennyson

Answer 5

This article shows how to select by title ('preview') in this case. You can then select the anchor tag ('a') with title preview and then click it.

Best of luck,

Dan

Whidah