Добавить кнопку самозакрывающегося шорткода в TinyMCE в WP 4.6
Я знаком с созданием самозакрывающихся коротких кодов, таких как:
// shortcode
function wpse_shortcode_example( $wpse_atts ) {
// Attributes
$wpse_atts = shortcode_atts(
array(
'foo' => 'bar',
'width' => '100%',
'height' => 'auto',
),
$wpse_atts,
'wpse'
);
// Return
return '<embed
src="' . $wpse_atts['src'] . '"
width="' . $wpse_atts['width'] . '"
height="' . $wpse_atts['height'] . '";
}
add_shortcode( 'wpse', 'wpse_shortcode_example' );
Но я хотел бы начать добавлять их в TinyMCE. Я провел несколько поисков, но все результаты поиска либо устарели, либо используют подход, который больше не рекомендуется:
- Как добавить кнопку с коротким кодом в редактор TinyMCE?: отличная отправная точка, но вопрос был создан в 2012 году.
-
Короткие коды WordPress: Полное руководство: хорошая статья, но с 2012 года, и она использует
query_posts()
, но может быть изменена - Руководство по созданию собственных кнопок редактора WordPress: это хорошая статья, но все еще написанная некоторое время назад, в 2013 году, но она не охватывает основы или основы использования TinyMCE.
Я знаю, что разработчик все еще находится на ранних стадиях, но в руководстве по плагинам лишь кратко говорится о Расширенных шорткодах TinyMCE и API шорткодов и add_shortcode()
не упоминай Крошечный.
Итак, это подводит меня к моему вопросу. Какова основная процедура превращения самозакрывающегося шорткода в кликабельную кнопку в редакторе TinyMCE?
1 answers
Мы начнем с добавления пользовательской кнопки TinyMCE:
function add_mce_button_custom_em() {
// check user permissions
if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
return;
}
// check if WYSIWYG is enabled
if ( 'true' == get_user_option( 'rich_editing' ) ) {
add_filter( 'mce_external_plugins', 'add_tinymce_plugin_custom_em' );
add_filter( 'mce_buttons', 'register_mce_button_custom_em' );
}
}
add_action('admin_head', 'add_mce_button_custom_em');
Затем мы объявляем и регистрируем новую кнопку:
// Declare script for new button
function add_tinymce_plugin_custom_em( $plugin_array ) {
$plugin_array['custom_em'] = get_template_directory_uri() .'/plug/custom-em/custom-em.js';
return $plugin_array;
}
// Register new button in the editor
function register_mce_button_custom_em( $buttons ) {
array_push( $buttons, 'custom_em' );
return $buttons;
}
Наконец, мы решаем, какие кнопки (подробнее о кнопках можно найти в разделе Форматирование содержимого) мы хотим отобразить. Очевидно, что если вы имеете в виду UX, вы бы отображали только некоторые из них, например:
// TinyMCE: TinyMCE choose which buttons you want to display
function myformatTinyMCE( $in ) {
$in['toolbar1'] = 'styleselect,bold,custom_em,blockquote,hr,aligncenter,link,unlink,spellchecker,undo,removeformat';
return $in;
}
add_filter( 'tiny_mce_before_init', 'myformatTinyMCE' );
Как вы можете видеть в функции add_tinymce_plugin_custom_em
, мы объявляем файл javascript внутри get_template_directory_uri() .'/plug/custom-em/custom-em.js'
Итак, создайте файл custom-em.js
, а затем у вас есть два способа сделать это.
Либо вы можете использовать следующий формат шорткода [shortcode foo="" bar=""]
, либо [shortcode][/shortcode]
.
Давайте начнем с формата [shortcode foo="" bar=""]
:
(function() {
tinymce.create('tinymce.plugins.custom_em', {
init : function(ed, url) {
ed.addButton('custom_em', {
title : 'Custom EM',
image : url+'/images/btn_custom_em.png',
onclick : function() {
ed.execCommand(
"mceInsertContent",
false,
"[shortcode foo=\"\" bar=\"\"]"
);
}
});
}
});
tinymce.PluginManager.add('custom_em', tinymce.plugins.custom_em);
})();
Как вы можете видеть, мы используем изображение в качестве значка кнопки. Вы можете изменить это в текст, как показано в примере ниже.
Следующее - это то, что мы используем на нашей собственной платформе, оно заключает выбор в: <em class="whatever">hello world</em>
:
(function() {
tinymce.PluginManager.add('custom_em', function( editor, url ) {
editor.on('init', function(e) {
this.formatter.register('thetarget', {
inline : 'em',
classes : 'whatever'
});
});
editor.addButton('custom_em', {
text: 'Custom EM',
icon: false,
onclick : function() {
var contents = editor.selection.getContent(),
tags = jQuery(jQuery.parseHTML(contents)).find('em.whatever').andSelf();
editor.formatter.toggle('thetarget');
}
});
});
})(jQuery);
Пожалуйста, опубликуйте результаты и внесите изменения. TinyMCE - это чума и требует головная боль, но ее можно решить совместными усилиями.