Решение для отображения коротких кодов в Admin Editor

Я задавал этот вопрос около года назад, и я надеюсь, что есть какое-то простое решение, которое позволит мне достичь моей цели. Так что вот так:

Я часто использую шорткоды в редакторе администратора, но когда я передаю это клиенту, они часто не понимают, как они работают.

То, что я ищу, - это решение, которое просто автоматически отображало бы ассоциированные выходные данные коротких кодов в редакторе администратора WYSIWYG.

С визуальной точки зрения я бы хотел, чтобы это отображалось аналогично тому, когда появляется строка «more» или когда изображение отображается в редакторе. Под этим я подразумеваю, что пользователь будет видеть выходные данные, но сможет только удалить их, но не сможет редактировать содержимое визуализированного шорткода.

Это на самом деле не так уж плохо делать то, что вы просите. Это займет у вас около часа, чтобы сделать первый, и 10 минут, чтобы сделать последующие.

В конечном итоге вы собираетесь создать плагин TinyMCE. Вот что вы должны вооружиться, чтобы начать:

1. Общее руководство по созданию плагина tinymce
2. Пример кода из WordPress Core
3. Общее руководство по добавлению плагина TinyMCE в WordPress. Я нашел этот , который кажется адекватным.

Теперь у вас есть все инструменты, чтобы сделать это! Из всего этого код, который будет наиболее интересен для вас, - это блок в примере кода 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  }

Здесь шорткод для галереи заменяется imgтегом. У imgтега есть класс wp-gallery, который стилизован под CSS, найденный здесь .

Редактировать 2016-04-06: Обновлен контент и ссылки для TinyMCE 4 и WordPress 4.4

Это не полный ответ, просто направление дизайна. Я думаю, что лучший подход это что-то вроде этого:

В админ редактировать пост

Извлеките все шорткоды из сохраненного сообщения и отобразите его в метабоксе, кроме редактора . Убедитесь, что они отображаются в том же порядке, что и короткие коды в крошечном редакторе.

В tinyMCE JavaScript API

Сделайте функцию jQuery, когда пользователь нажимает на шорткод, он меняет HTML-код из метабокса в редактор. И наоборот. Сам порядок должен быть в порядке ассоциации, но я не уверен в том, что он должен содержать короткие коды. Однако есть много способов создать красивое ID-соединение. Обновления шорткодов могут быть сделаны на лету с помощью AJAX.

Никогда не сохраняйте визуализированное состояние шорткода

Перед переключением редакторов, сохранением черновиков, автодрафтов и публикаций сделайте вызов API для запуска восстановления, чтобы отображенное состояние шорткода никогда не сохранялось ...

Это можно сделать, но вы должны быть знакомы с API tinyMCE, чтобы понять, где и когда получить доступ к содержимому редактора, и подключиться к действиям javascript перед «сохранить» и многое другое.

На одной странице редактирования поста может быть несколько редакторов tinyMCE.

Восстановить часть можно исследовать, глядя на [gallery]SHORTCODE beaviour. Но клик [MY_SHORTCODE]должен быть сделан с помощью некоторых приемов jQuery.

в скрипте admin_footer получите доступ к содержимому, где активен курсор:

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

намек на то, как начать.

Я искал способ графически отображать и настраивать шорткоды тоже. И вот, наконец, я нашел учебник, который делает именно это: https://generatewp.com/take-shortcodes-ultimate-level/

Я добавляю описание, чтобы поисковые системы его подбирали:

Мы собираемся создать простой плагин с шорткодом, а затем добавим кнопку редактора TinyMCE, чтобы вставить этот шорткод через всплывающее окно, которое будет собирать весь пользовательский ввод для атрибутов шорткода. Затем мы заменим шорткод в редакторе TinyMCE на изображение-заполнитель, очень похожее на нативную галерею WordPress (на самом деле это шорткод, если вы не знали), и, наконец, - мы собираемся разрешить редактирование. шорткода и его атрибутов двойным щелчком по изображению-заполнителю.