Visualizzazione automatica del pannello di anteprima in markitup! editor

Question

Sto usando il markitup! come editor markdown (example).

Attualmente, ho bisogno di premere il pulsante di anteprima (segno di spunta verde) per visualizzare il pannello di anteprima.

Vorrei che l'anteprima fosse visualizzata automaticamente - come posso ottenere questo risultato?

Answer 1

non ho alcuna esperienza con questo editor, ma

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

chiamato dopo il caricamento dell'editor sembra fare quello che vuoi.

Answer 2

This article mostra come selezionare per titolo ('anteprima') in questo caso. È quindi possibile selezionare il tag di ancoraggio ('a') con l'anteprima del titolo e quindi fare clic su di esso.

Buona fortuna,

Dan

Answer 3

Mark's answer lavorato. Per ragioni di completezza, ecco dove ho aggiunto il suo codice:

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

Answer 4

Nel caso in cui nessun altro sta seguendo la risposta accettata e si imbatte in problemi:

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

funzionato per me (mentre 'mouseup' non ha fatto). Forse hanno cambiato il comportamento nella nuova versione di markup ! (v1.1.7)?

Answer 5

Oppure si potrebbe fare hacking un po ': nel file di origine aggiungere

autoShowPreview: false,

come un campo nelle opzioni oggetto in modo che sarà del tipo:

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 */ } ] 
      }; 

Quindi vicino alla fine del documento attorno alla linea 610 c'è la chiamata a init(); funzione. È possibile modificare in questo modo:

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

È sempre possibile disattivare, se non necessario, modificando la nostra prop personalizzati in fase di inizializzazione.