How to add your own preset to the classic wp editor?
-
Adding in html editor mode
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 );
Adding in visual editor mode (buttons)
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; }
Question: how to add to the drop-down list (see screenshot)https://prnt.sc/1MmEGcEvahOx
Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
- You must be logged in to reply to this topic.