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.

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ąć:

1. Ogólny przewodnik po tworzeniu wtyczki tinymce
2. Przykładowy kod z WordPress Core
3. 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

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ąć.

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.