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

19

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

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

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

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

NetConstructor.com
источник
Вы читали эту статью ( wp.tutsplus.com/tutorials/theme-development/… )? Проверьте часть TinyMCE.
cr0z3r
1
Я читал это, но, насколько я могу судить, он имеет дело только с созданием / регистрацией коротких кодов и созданием кнопок для быстрого ввода коротких кодов редактором ... Но нет никакой информации о рендеринге этих коротких кодов с аналогами блоков HTML, как я описал.
NetConstructor.com
Вы имеете в виду, что хотите включить наглядное пособие, представляющее любой шорткод, который вы включаете, а не заменять шорткод реальным HTML-кодом? то есть заполнитель галереи, который на самом деле не код галереи, а визуальный заполнитель, который просто сообщает пользователю: «Эй, здесь есть галерея»?
Мэтью Бойнс
Точно! И я хотел бы, чтобы он был немного гибким, что позволило бы мне настраивать его для каждого шорткода (аналогично тому, как вы сказали в галерее или когда изображение включено)
NetConstructor.com

Ответы:

19

Это на самом деле не так уж плохо делать то, что вы просите. Это займет у вас около часа, чтобы сделать первый, и 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

Мэтью Бойнс
источник
интересный! позвольте мне спросить вас ... что вы думаете о том, чтобы фактическое содержание всех шорткодов автоматически конвертировалось в соответствующий контент?
NetConstructor.com
Это все зависит от содержания. Во-первых, помните, что некоторые HTML-файлы удаляются, возникают проблемы при рендеринге в TinyMCE и т. Д. Во-вторых, скажем, ваш шорткод отображает блок сложного HTML - если ваш пользователь ушел на его редактирование, он мог бы случайно его сломать. В-третьих, если у вашего шорткода есть параметры, эти параметры теперь становятся недоступными для редактирования, если вы не уничтожите весь блок HTML и не переделаете шорткод. Скорее всего, если ваш код достаточно сложен, и вам нужен короткий код, я думаю, что заполнитель - ваш лучший выбор.
Мэтью Бойнс
Вы когда-нибудь видели решение по этому вопросу?
NetConstructor.com
0

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

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

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

В 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());

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

Джонас Лундман
источник
0

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

Скриншот

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

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

Марк Шехаб
источник