Решение для отображения шорткодов в админ-редакторе

Question

Решение для отображения шорткодов в админ-редакторе

15 дек. 2011 г., 17:43:16

Просмотры: 18.9K

Голосов: 22

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

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

Мне нужно решение, которое будет автоматически отображать результат выполнения шорткодов прямо в визуальном редакторе (WYSIWYG) админки WordPress.

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

NetConstructor.com

4.41K

функции редактор шорткод

Комментарии

Вы читали эту (http://wp.tutsplus.com/tutorials/theme-development/wordpress-shortcodes-the-right-way/) статью? Посмотрите раздел про TinyMCE.

cr0z3r

15 дек. 2011 г. 17:50:42

Я читал её, но насколько я понял, там речь идёт только о создании/регистрации шорткодов и кнопок для редактора, чтобы быстро вставлять шорткоды... Но нет информации о рендеринге этих шорткодов с HTML-блоками, как я описал.

NetConstructor.com

15 дек. 2011 г. 20:51:23

Ты имеешь в виду, что хочешь включить визуальную подсказку, которая представляет шорткод, а не заменять шорткод реальным HTML-кодом? Например, плейсхолдер галереи, который на самом деле не является кодом галереи, а просто визуальным заполнителем, показывающим пользователю: "Эй, здесь будет галерея"?

Matthew Boynes

30 янв. 2012 г. 07:27:38

Точно! И я хотел бы, чтобы это было немного гибким, что позволило бы мне настраивать это для каждого шорткода (как вы сказали, например, для галереи или при включении изображения)

NetConstructor.com

30 янв. 2012 г. 12:55:39

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

jgraup

30 авг. 2016 г. 17:12:03

Все ответы на вопрос

Комментарии

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

NetConstructor.com

1 февр. 2012 г. 11:09:44

Это полностью зависит от контента. Во-первых, помните, что часть HTML удаляется, возникают проблемы с отображением в TinyMCE и т.д. Во-вторых, допустим, ваш шорткод выводит блок сложного HTML — если пользователь захочет его отредактировать, он может случайно сломать его. В-третьих, если у вашего шорткода есть параметры, они станут недоступны для редактирования, пока вы не удалите весь HTML-блок и не пересоздадите шорткод. Скорее всего, если ваш код достаточно сложен и требует использования шорткода, я считаю, что плейсхолдер — это лучшее решение.

Matthew Boynes

1 февр. 2012 г. 16:09:28

вы когда-нибудь встречали решение этой проблемы от кого-то еще?

NetConstructor.com

24 нояб. 2012 г. 01:54:24

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

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

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

В JavaScript API tinyMCE

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

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

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

Это реализуемо, но вам нужно хорошо разбираться в API tinyMCE, чтобы понимать, где и когда получать доступ к содержимому редактора, а также подключаться к JavaScript-действиям перед 'save' и другим.

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

Часть восстановления можно изучить, посмотрев на поведение шорткода [gallery]. Но клик по [MY_SHORTCODE] придётся реализовать с помощью некоторых jQuery-трюков.

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

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

Это подсказка для начала работы.

Jonas Lundman

384

10 июн. 2018 г. 04:00:58

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

Скриншот

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

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

Marc Chéhab

1

23 июн. 2018 г. 23:14:28

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

На самом деле, то, о чем вы спрашиваете, не так сложно реализовать. Первый раз это займет у вас около часа, а последующие — не более 10 минут.

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

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

Теперь у вас есть все инструменты, чтобы справиться с задачей! Из всего этого наиболее интересным для вас будет следующий блок кода из примера WordPress:

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