Displaying preview panel automatically in markitup! editor

问题

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?

回答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.

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

回答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>

回答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.

回答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

来源：https://stackoverflow.com/questions/1380603/displaying-preview-panel-automatically-in-markitup-editor

标签

jquery

markup

markitup