Soluție pentru afișarea Shortcode-urilor în Editorul Admin

Question

Soluție pentru afișarea Shortcode-urilor în Editorul Admin

15 dec. 2011, 17:43:16

Vizualizări: 18.9K

Voturi: 22

Am pus această întrebare acum aproximativ un an și sper că există o soluție simplă care să mă ajute să ating obiectivul meu. Iată problema:

Folosesc frecvent shortcode-uri în Editorul Admin, dar când le predau clientului, aceștia nu înțeleg adesea cum funcționează.

Ceea ce caut este o soluție care să afișeze automat rezultatul asociat al shortcode-urilor în editorul WYSIWYG Admin.

Din punct de vedere vizual, aș dori ca acest lucru să apară similar cu modul în care apare linia "more" sau cum este afișată o imagine în editor. Prin asta mă refer ca utilizatorul să vadă rezultatul, dar să nu poată edita conținutul shortcode-ului renderizat, ci doar să îl poată șterge.

NetConstructor.com

4.41K

funcții editor shortcode

Comentarii

Ai citit acest (http://wp.tutsplus.com/tutorials/theme-development/wordpress-shortcodes-the-right-way/) articol? Verifică partea despre TinyMCE.

cr0z3r

15 dec. 2011 17:50:42

L-am citit, dar din câte înțeleg, se referă doar la crearea/înregistrarea shortcode-urilor și la crearea de butoane pentru editor pentru a insera rapid shortcode-uri... Dar nu oferă informații despre randarea acelor shortcode-uri cu echivalenții lor HTML așa cum am descris.

NetConstructor.com

15 dec. 2011 20:51:23

Vrei să spui că dorești să incluzi un ajutor vizual care să reprezinte shortcode-ul pe care îl folosești, și nu înlocuirea shortcode-ului cu codul HTML real? Adică un placeholder pentru galerie, care nu este de fapt codul galeriei, ci doar un indicator vizual care îi spune utilizatorului: "Hei, aici este o galerie"?

Matthew Boynes

30 ian. 2012 07:27:38

Exact! Și aș dori să fie puțin flexibil, permițându-mi să-l personalizez pe baza fiecărui shortcode (similar cum ai spus pentru gallery sau când este inclusă o imagine)

NetConstructor.com

30 ian. 2012 12:55:39

https://wordpress.org/plugins/shortcode-ui/

jgraup

30 aug. 2016 17:12:03

Toate răspunsurile la întrebare

Comentarii

interesant! lasă-mă să te întreb... ce părere ai despre ideea de a converti automat conținutul real al tuturor shortcode-urilor în conținutul asociat?

NetConstructor.com

1 feb. 2012 11:09:44

Totul ar depinde de conținut. În primul rând, ține minte că o parte din HTML este eliminată, are probleme cu randarea în TinyMCE, etc. În al doilea rând, să presupunem că shortcode-ul tău generează un bloc complex de HTML — dacă utilizatorul tău ar încerca să îl editeze, ar putea să-l strice accidental. În al treilea rând, dacă shortcode-ul tău are opțiuni, acele opțiuni vor deveni ineditabile, cu excepția cazului în care ștergi întregul bloc HTML și refaci shortcode-ul. Cel mai probabil, dacă codul tău este suficient de complex încât să ai nevoie de shortcode, cred că placeholder-ul este cea mai bună soluție.

Matthew Boynes

1 feb. 2012 16:09:28

ai dat vreodată peste vreo soluție pentru asta de la altcineva?

NetConstructor.com

24 nov. 2012 01:54:24

Acesta nu este un răspuns complet, ci doar o direcție de design. Cred că cea mai bună abordare este ceva de genul acesta:

În editarea postării în admin

Extrage toate shortcode-urile din postarea salvată și afișează-le într-un metabox, în afara editorului. Asigură-te că apar în aceeași ordine în care shortcode-urile apar în editorul TinyMCE.

În API-ul JavaScript tinyMCE

Creează o funcție jQuery care, atunci când utilizatorul face clic pe un shortcode, să înlocuiască HTML-ul din metabox în editor. Și invers. Ordinea în sine ar trebui să fie suficientă ca asociere, dar nu sunt sigur în cazul shortcode-urilor care includ conținut. Totuși, există multe modalități de a proiecta o conexiune elegantă prin ID. Actualizările shortcode-urilor pot fi făcute din mers cu ajutorul AJAX.

Nu salva niciodată starea renderizată a shortcode-urilor

Înainte de a comuta între editori, salva schițe, schițe automate sau publică, apelează un API pentru a declanșa restaurarea, astfel încât starea renderizată a shortcode-urilor să nu fie niciodată salvată...

Aceasta poate fi realizată, dar trebuie să fii familiarizat cu API-ul tinyMCE pentru a înțelege unde și când să accesezi conținutul editorului, precum și să folosești acțiuni JavaScript înainte de 'salvare' și altele.

Pot exista mai multe editori tinyMCE încărcate pe aceeași pagină de editare a postării.

Partea de restaurare poate fi investigată uitându-ne la comportamentul shortcode-ului [gallery]. Dar clicul pe [MY_SHORTCODE] trebuie realizat prin câteva trucuri jQuery.

În scriptul admin_footer, accesează conținutul zonei în care cursorul este activ cu:

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

este un indiciu despre cum să începi.

Jonas Lundman

384

10 iun. 2018 04:00:58

Căutam o modalitate de a afișa și ajusta grafic shortcode-urile. Și acum, în sfârșit, am găsit un tutorial care face exact asta: https://generatewp.com/take-shortcodes-ultimate-level/

Captură de ecran

Adaug descrierea astfel încât motoarele de căutare să o înțeleagă:

Vom crea un simplu plugin cu un shortcode, apoi vom adăuga un buton în editorul TinyMCE pentru a insera acel shortcode printr-o fereastră popup care va colecta toate datele introduse de utilizator pentru atributele shortcode-ului. Apoi, vom înlocui shortcode-ul în editorul TinyMCE cu o imagine substituentă, similar cu galeria nativă din WordPress (care de fapt este un shortcode, dacă nu știai), iar în final – vom permite editarea shortcode-ului și a atributelor sale prin dublu-click pe imaginea substituentă.

Marc Chéhab

1

23 iun. 2018 23:14:28

Matthew Boynes 7.12K · Accepted Answer · 2012-01-31T00:42:48Z

De fapt, nu este prea greu să faci ceea ce ceri. Primul exemplu ar trebui să-ți ia cam o oră, iar următoarele doar 10 minute.

În esență, vei crea un plugin TinyMCE. Iată ce ar trebui să ai la îndemână pentru început:

Ghid general pentru crearea unui plugin TinyMCE
Cod exemplu din WordPress Core
Un ghid general despre adăugarea unui plugin TinyMCE în WordPress. Am găsit acesta, care pare adecvat.

Acum ai toate instrumentele necesare pentru a reuși! Din toate acestea, codul care va fi cel mai interesant pentru tine este acest bloc din exemplul 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  }

Aici, shortcode-ul pentru o galerie este înlocuit cu un tag img. Tag-ul img are clasa wp-gallery, care este stilizată prin CSS-ul găsit aici.

Actualizare 2016-04-06: Conținut și linkuri actualizate pentru TinyMCE 4 și WordPress 4.4