8

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?

Alasdair
  • 298,606
  • 55
  • 578
  • 516

5 Answers5

11

I have no experience with this editor but

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

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

Mark
  • 106,305
  • 20
  • 172
  • 230
9

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

Volker Rose
  • 1,808
  • 15
  • 16
  • +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. – Jakub Apr 03 '11 at 04:18
  • Interestingly `trigger('mousedown')` did not work for me, but `trigger('mouseup')` did. The markitup file has the version `v 1.1.x` in it – Timo Huovinen Mar 24 '14 at 12:00
  • As for 1.1.15 works again `mouseup`, not `mousedown`. – lubosdz Sep 25 '19 at 07:47
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>
Community
  • 1
  • 1
Alasdair
  • 298,606
  • 55
  • 578
  • 516
  • Note that this answer is nearly 4 years old. Try [Volker's answer](http://stackoverflow.com/a/2840724/113962) above. If that doesn't work, try asking a new question. – Alasdair Aug 04 '13 at 17:00
1

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.

azpublic
  • 1,404
  • 4
  • 20
  • 42
0

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

Daniel Elliott
  • 22,647
  • 10
  • 64
  • 82