Soluzione per il rendering di shortcode in Admin Editor

Ho fatto questa domanda circa un anno fa e spero che ci sia un qualche tipo di soluzione semplice che mi permetterà di raggiungere il mio obiettivo. Quindi ecco qui:

Uso spesso codici brevi all'interno dell'Editor Admin, ma quando lo passo al client spesso non capiscono come funzionano.

Quello che sto cercando è una soluzione che renderebbe automaticamente automaticamente l'output associato dei codici brevi all'interno dell'editor WYSIWYG dell'amministratore.

Da un punto di vista visivo, vorrei che fosse visualizzato in modo simile a quando appare la riga "più" o quando un'immagine viene visualizzata nell'editor. Con questo intendo che l'utente vedrebbe l'output ma sarebbe solo in grado di eliminarlo ma non modificare il contenuto dello shortcode reso.

In realtà non è poi così male fare ciò che stai chiedendo. Ciò dovrebbe richiedere circa un'ora per eseguire il primo e 10 minuti per eseguire quelli successivi.

Alla fine, quello che farai è creare un plugin TinyMCE. Ecco cosa dovresti armarti di iniziare:

1. Guida generale alla creazione di un plugin tinymce
2. Codice di esempio da WordPress Core
3. Una guida generale sull'aggiunta di un plugin TinyMCE a WordPress. Ho trovato questo , che sembra adeguato.

Ora hai tutti gli strumenti per farlo! Di tutto ciò, il codice che ti interesserà di più è questo blocco nel codice di esempio WP:

4   function replaceGalleryShortcodes( content ) {
5       return content.replace( /\[gallery([^\]]*)\]/g, function( match ) {
6           return html( 'wp-gallery', match );
7       });
8   }
9
10  function html( cls, data ) {
11      data = window.encodeURIComponent( data );
12      return '<img src="' + tinymce.Env.transparentSrc + '" class="wp-media mceItem ' + cls + '" ' +
13          'data-wp-media="' + data + '" data-mce-resize="false" data-mce-placeholder="1" alt="" />';
14  }

Qui, lo shortcode per una galleria viene sostituito con un imgtag. Il imgtag ha la classe wp-gallery, che viene definita dal CSS trovato qui .

Modifica 06-04-2016: contenuti e collegamenti aggiornati per TinyMCE 4 e WordPress 4.4

Questa non è una risposta completa, solo una direzione progettuale. Penso che l'approccio migliore sia qualcosa del genere:

Nel post di modifica dell'amministratore

Copia tutti i codici brevi dal post salvato e renderlo all'interno di un metabox, a parte l'editor . Assicurati che appaiano nello stesso ordine dei codici brevi presenti nel minuscolo Editor.

Nell'API javascript tinyMCE

Crea una funzione jQuery, quando l'utente fa clic su uno shortcode, scambia l'HTML dal metabox nell'editor. E viceversa. L'ordine stesso dovrebbe essere ok come associazione, ma non sono sicuro di racchiudere codici brevi. Tuttavia, esistono molti modi per progettare una buona connessione ID. Gli aggiornamenti dei codici brevi possono essere eseguiti al volo con ajax.

Non salvare mai lo stato di shortcode reso

Prima di cambiare editor, salvare bozze, autodraft e pubblicare, effettuare una chiamata API per attivare il ripristino, quindi lo stato di shortcode renderizzato non viene mai salvato ...

Questo può essere fatto, ma è necessario avere familiarità con l'API tinyMCE per capire dove e quando accedere ai contenuti dell'editor e agganciarsi alle azioni javascript prima di "salvare" e altro ancora.

Possono esserci diversi editor tinyMCE nello stesso post pageload di modifica.

La parte di ripristino può essere esaminata osservando il [gallery]codice di scelta rapida. Ma il clic su [MY_SHORTCODE]deve essere fatto da alcuni trucchi jQuery.

nello script admin_footer, accedi al contenuto di dove è attivo il cursore con:

var $editor_content = $(tinymce.activeEditor.getBody());

è un suggerimento su come iniziare.

Stavo cercando un modo per visualizzare graficamente e modificare anche i codici brevi. E ora, finalmente, ho trovato un tutorial che fa esattamente questo: https://generatewp.com/take-shortcodes-ultimate-level/

Aggiungo la descrizione in modo che i motori di ricerca la raccolgano:

Creeremo un semplice plugin con uno shortcode, quindi aggiungeremo un pulsante dell'editor TinyMCE per inserire quel shortcode attraverso un popup che raccoglierà tutto l'input dell'utente per gli attributi dello shortcode. Quindi, sostituiremo lo shortcode nell'editor TinyMCE con un'immagine segnaposto, proprio come la galleria nativa di WordPress (che in realtà è uno shortcode, nel caso non lo sapessi), e infine - consentiremo la modifica dello shortcode e dei suoi attributi facendo doppio clic sull'immagine segnaposto.