Как добавить в выпадающий список (в классическом редакторе wordpress) свои кнопки \ пресеты?
Всем привет. Я нашел способ как добавить просто кнопки (в редакторе html, в визуальном редакторе). А как добавить их в уже созданный (дефолтный выпадающий список wp tinymce) свои прессеты ?
Добавление в режиме html редактора
add_action( 'admin_print_footer_scripts', 'theme_add_quicktags', 99 );
function theme_add_quicktags() {
if ( ! wp_script_is('quicktags') )
return;
?>
<script>
document.addEventListener( 'DOMContentLoaded', function(){
QTags.addButton( 'r4_div_blue', 'div_blue', '<div class="color-blue">', '</div>', 'd', 'Div blue', 1 );
QTags.addButton( 'r4_h3_blue', 'h3_blue', '<h3 class="color-blue">', '</h3>', 'h', 'H3 blue', 2 );
QTags.addButton( 'r4_ol_lg', 'ol_lg', '<ol class="lg-list">', '</ol>', 'o', 'Ol lg', 3 );
} );
</script>
<?php
}
//QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance );
Добавление в режиме визуального редактора (кнопки )
tinymce-buttons.js
(function() {
tinymce.create('tinymce.plugins.theme_buttons', {
init : function(ed, url) {
ed.addButton('r4_div_blue', {
title : 'Div blue',
icon: 'mce-ico mce-i-checkmark', // использование иконки Dashicons
onclick : function() {
ed.execCommand('mceInsertContent', false, '<div class="color-blue"></div>');
ed.label = 'Div blue';
}
});
ed.addButton('r4_h3_blue', {
title : 'H3 blue',
icon: 'mce-ico mce-i-checkmark', // использование иконки Dashicons
onclick : function() {
ed.execCommand('mceInsertContent', false, '<h3 class="color-blue"></h3>');
ed.label = 'H3 blue';
}
});
ed.addButton('r4_ol_lg', {
title : 'Ol lg',
icon: 'mce-ico mce-i-checkmark', // использование иконки Dashicons
onclick : function() {
ed.execCommand('mceInsertContent', false, '<ol class="lg-list"><li></li></ol>');
ed.label = 'Ol lg';
}
});
}
});
tinymce.PluginManager.add('theme_buttons', tinymce.plugins.theme_buttons);
})();
function.php
function theme_tinymce_plugin($plugin_array) {
$plugin_array['theme_buttons'] = get_template_directory_uri() . '/assets/js/tinymce-buttons.js?v=17'; // путь к вашему JS файлу
return $plugin_array;
}
function theme_register_buttons($buttons) {
array_push($buttons, 'r4_div_blue', 'r4_h3_blue', 'r4_ol_lg');
return $buttons;
}
Ответы (1 шт):
Для добавления своих пресетов в выпадающий список TinyMCE в WordPress, вам нужно будет использовать фильтры и действия, предоставляемые TinyMCE. Вот пример, как это можно сделать:
- Создайте файл JavaScript для вашего плагина TinyMCE:
Создайте файл tinymce-presets.js в вашей теме или плагине. В этом файле вы будете добавлять свои пресеты.
(function() {
tinymce.create('tinymce.plugins.theme_presets', {
init : function(ed, url) {
// Добавляем новый выпадающий список
ed.addButton('theme_presets', {
type: 'listbox',
text: 'Presets',
icon: false,
onselect: function(e) {
ed.execCommand('mceInsertContent', false, this.value());
},
values: [
{text: 'Div blue', value: '<div class="color-blue"></div>'},
{text: 'H3 blue', value: '<h3 class="color-blue"></h3>'},
{text: 'Ol lg', value: '<ol class="lg-list"><li></li></ol>'}
],
onPostRender: function() {
// Устанавливаем значение по умолчанию
this.value('');
}
});
}
});
tinymce.PluginManager.add('theme_presets', tinymce.plugins.theme_presets);
})();
- Добавьте фильтры и действия в functions.php вашей темы:
function theme_tinymce_plugin($plugin_array) {
$plugin_array['theme_presets'] = get_template_directory_uri() . '/assets/js/tinymce-presets.js?v=17'; // путь к вашему JS файлу
return $plugin_array;
}
add_filter('mce_external_plugins', 'theme_tinymce_plugin');
function theme_register_buttons($buttons) {
array_push($buttons, 'theme_presets');
return $buttons;
}
add_filter('mce_buttons', 'theme_register_buttons');
- Добавьте стили для ваших пресетов (если необходимо):
Если вам нужно добавить стили для ваших пресетов, вы можете добавить их в CSS файл вашей темы или плагина.
.color-blue {
color: blue;
}
.lg-list {
font-size: 1.5em;
}
Теперь, когда вы откроете визуальный редактор TinyMCE, у вас будет новый выпадающий список с вашими пресетами. Вы можете выбрать любой из них, и соответствующий HTML-код будет вставлен в редактор.