Rozwiązanie do renderowania skrótów w Admin Editor

Zadałem to pytanie około roku temu i mam nadzieję, że istnieje jakieś proste rozwiązanie, które pozwoli mi osiągnąć cel. A więc oto:

Często używam skrótów w Edytorze administracyjnym, ale kiedy przekazuję to klientowi, często nie rozumieją, jak działają.

To, czego szukam, to rozwiązanie, które po prostu automatycznie renderuje skojarzone dane wyjściowe skrótów w administracyjnym edytorze WYSIWYG.

Z wizualnego punktu widzenia chciałbym, aby wyświetlało się podobnie do tego, kiedy pojawia się linia „więcej” lub gdy obraz jest wyświetlany w edytorze. Rozumiem przez to, że użytkownik zobaczy wynik, ale będzie mógł go tylko usunąć, ale nie będzie mógł edytować treści renderowanego skrótu.

functions editor shortcode

— NetConstructor.com
źródło

Czy przeczytałeś ten ( wp.tutsplus.com/tutorials/theme-development/… ) artykuł? Sprawdź część TinyMCE.

— cr0z3r

Przeczytałem to, ale, o ile mogę to powiedzieć, zajmuje się tylko tworzeniem / rejestrowaniem krótkich kodów i tworzeniem przycisków dla edytora, aby szybko wstawiać krótkie kody ... Ale nie ma informacji na temat renderowania tych krótkich kodów z odpowiednikami bloków HTML, jak to opisałem.

— NetConstructor.com,

Czy masz na myśli, że chcesz dołączyć pomoc wizualną reprezentatywną dla dowolnego włączonego kodu, a nie zastępować go kodem HTML? tzn. symbol zastępczy galerii, który w rzeczywistości nie jest kodem galerii, ale raczej wizualny symbol zastępczy, który informuje użytkownika: „Hej, tu jest galeria”?

— Matthew Boynes

Dokładnie! Chciałbym, aby był nieco elastyczny, co pozwala mi dostosowywać go na podstawie

— krótkiego kodu

wordpress.org/plugins/shortcode-ui

— jgraup

Odpowiedzi:

Robienie tego, o co prosisz, nie jest wcale takie złe. Wykonanie pierwszego powinno zająć około godziny, a kolejne 10 minut.

Ostatecznie, co zamierzasz zrobić, to stworzyć wtyczkę TinyMCE. Oto, co powinieneś uzbroić, aby rozpocząć:

Ogólny przewodnik po tworzeniu wtyczki tinymce
Przykładowy kod z WordPress Core
Ogólny przewodnik po dodawaniu wtyczki TinyMCE do WordPress. Znalazłem ten , który wydaje się odpowiedni.

Masz teraz wszystkie narzędzia do zrobienia! Ze wszystkich tego najbardziej interesujący będzie kod w tym bloku w przykładowym kodzie 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  }

Tutaj skrót do galerii zostaje zastąpiony imgtagiem. imgTag ma klasę wp-gallery, która zostanie zaprojektowany przez CSS znaleźć tutaj .

Edytuj 2016-04-06: Zaktualizowano zawartość i linki do TinyMCE 4 i WordPress 4.4

— Matthew Boynes
źródło

ciekawy! pozwól, że cię zapytam ... co sądzisz o tym, że rzeczywista treść wszystkich skrótów jest automatycznie konwertowana na powiązaną treść?

— NetConstructor.com

To wszystko zależy od treści. Po pierwsze, pamiętaj, że część HTML zostaje rozebrana, ma problemy z renderowaniem w TinyMCE itp. Po drugie, powiedzmy, że twój shortcode renderuje blok złożonego HTML - jeśli użytkownik poszedłby go edytować, mógłby przypadkowo go przerwać. Po trzecie, jeśli twój shortcode zawiera opcje, opcje te stają się teraz nieedytowalne, chyba że zabijesz cały blok HTML i powtórzysz shortcode. Możliwe, że jeśli Twój kod jest na tyle skomplikowany, że potrzebujesz krótkiego kodu, myślę, że symbol zastępczy jest najlepszym wyborem.

— Matthew Boynes

Czy zdarzyło Ci się kiedyś znaleźć rozwiązanie w tej sprawie?

— NetConstructor.com,

To nie jest pełna odpowiedź, tylko kierunek projektowania. Myślę, że najlepszym podejściem jest coś takiego:

W edytorze posta administratora

Zerwij wszystkie skróty z zapisanego postu i wyrenderuj je w metaboksie oprócz edytora . Upewnij się, że pojawiają się w tej samej kolejności, w jakiej występują krótkie kody w małym edytorze.

W tinyMCE javascript API

Wykonaj funkcję jQuery, gdy użytkownik kliknie krótki kod, zamienia HTML z metaboksu do edytora. I wzajemnie. Sama kolejność powinna być odpowiednia jako skojarzenie, ale nie jestem pewien, czy załączać krótkie kody. Istnieje jednak wiele sposobów zaprojektowania ładnego połączenia ID. Aktualizacji skrótów można dokonywać w locie za pomocą ajax.

Nigdy nie zapisuj renderowanego stanu shortcode

Przed przełączeniem edytorów zapisz wersje robocze, automatyczne wersje robocze i opublikuj, wykonaj wywołanie API, aby uruchomić przywracanie, aby renderowany stan krótkiego kodu nigdy nie został zapisany ...

Można to zrobić, ale musisz być zaznajomiony z interfejsem API tinyMCE, aby zrozumieć, gdzie i kiedy uzyskać dostęp do zawartości edytora, i podłączyć czynności javascript przed „zapisz” i więcej.

Może być kilka edytorów tinyMCE w tym samym edytowaniu postu.

Część przywracania można zbadać, patrząc na zachowanie [gallery]krótkiego kodu. Ale kliknięcie [MY_SHORTCODE]musi zostać wykonane przez kilka sztuczek jQuery.

w skrypcie admin_footer uzyskaj dostęp do zawartości aktywnego kursora za pomocą:

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

jest wskazówką jak zacząć.

— Jonas Lundman
źródło

Szukałem też sposobu graficznego wyświetlania i poprawiania skrótów. A teraz w końcu znalazłem samouczek, który dokładnie to robi: https://generatewp.com/take-shortcodes-ultimate-level/

Dodam opis, aby wyszukiwarki go podniosły:

Stworzymy prostą wtyczkę z krótkim kodem, a następnie dodamy przycisk edytora TinyMCE, aby wstawić ten kod przez wyskakujące okienko, które zbierze wszystkie dane wejściowe użytkownika dotyczące atrybutów shortcode. Następnie zastąpimy krótki kod w edytorze TinyMCE obrazem zastępczym, podobnie jak natywna galeria WordPress (która w rzeczywistości jest krótkim kodem, jeśli nie wiesz), i na koniec - pozwolimy na edycję krótkiego kodu i jego atrybutów, klikając dwukrotnie obraz zastępczy.

— Marc Chéhab
źródło