Рішення для надання коротких кодів у редакторі адміністратора

Я поставив це питання близько року тому, і сподіваюся, що існує якийсь простий варіант рішення, який дозволить мені досягти своєї мети. Тож ось що:

Я часто використовую короткі коди в Редакторі адміністраторів, але коли я передаю це клієнту, вони часто не розуміють, як вони працюють.

Що я шукаю - це рішення, яке б просто автоматично надавало асоційований вихід коротких кодів в адміністраторі WYSIWYG редактора.

З візуальної точки зору, я хотів би, щоб це відображалося подібним чином, коли з’являється рядок «більше» або коли зображення відображається в редакторі. Під цим я маю на увазі, що користувач побачив би вихід, але міг би видалити його, але не редагувати вміст наданого короткого коду.

functions editor shortcode

— NetConstructor.com
джерело

Чи читали ви цю ( wp.tutsplus.com/tutorials/theme-development/… ) статтю? Перевірте частину TinyMCE.

— cr0z3r

Я прочитав це, але, наскільки я можу сказати, це стосується лише створення / реєстрації коротких кодів та створення кнопок, щоб редактор швидко вставляв короткі коди ... Але ніякої інформації про надання цих штрих-кодів не має, як я описав.

— NetConstructor.com

Ви маєте на увазі, що ви хочете включити візуальну допомогу, яка є репрезентативною для будь-якого короткого коду, який ви включаєте, а фактично не замінюєш короткий код HTML-кодом реального укладення? тобто заповнювач галереї, який насправді не код галереї, а скоріше візуальний заповнювач, який просто дає користувачеві знати: "Гей, тут є галерея"?

— Меттью Бойнес

Саме так! І я хотів би, щоб він був трохи гнучким, дозволяючи мені налаштувати його на основі

— короткого коду

wordpress.org/plugins/shortcode-ui

— jgraup

Відповіді:

Насправді не так вже й погано робити те, що ти просиш. На це вам знадобиться близько години, щоб зробити ваш перший, і 10 хвилин, щоб зробити наступні.

Зрештою, ви збираєтеся зробити плагін TinyMCE. Ось що ви повинні озброїтись для початку:

Загальне керівництво по створенню плагіна tinymce
Приклад коду з WordPress Core
Загальне керівництво щодо додавання плагіна 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

Це не повна відповідь, просто напрямок дизайну. Я думаю, що найкращий підхід - це приблизно такий:

В адміністраторі редагувати повідомлення

Вилучіть усі шорт-коди із збереженої публікації та відведіть її всередині метабокса, окрім редактора . Переконайтеся, що вони відображаються в тому ж порядку, що і шорткоди в крихітному Редакторі.

У API JavaScript tinyMCE

Зробіть функцію jQuery, коли користувач натискає на короткий код, він заміняє HTML з метабокса в редактор. І навпаки. Сам порядок повинен бути нормальним як асоціація, але я не забуваю про вкладення шорткодів. Однак існує багато способів створити приємне ID-з'єднання. Оновлення шорт-кодів можна проводити на ходу за допомогою ajax.

Ніколи не зберігайте відображений стан короткого коду

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

Це можна зробити, але вам потрібно ознайомитись з API tinyMCE, щоб зрозуміти, де і коли отримати доступ до вмісту редактора, і зачепитись за дії JavaScript перед "збереженням" тощо.

На одному завантаженні сторінки редагування публікації може бути декілька редакторів крихітних MCE.

Відновити частину можна досліджувати, дивлячись на [gallery]SHORTCODE beaviour. Але натискання на [MY_SHORTCODE]це повинно здійснюватися деякими трюками jQuery.

у скрипті admin_footer відкрийте вміст, де працює курсор:

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

є підказкою, як почати.

— Йонас Лундман
джерело

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

Я додаю опис, щоб пошукові системи підбирали його:

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

— Марк Чехаб
джерело