添加“插入按钮”在工具栏Tinymce编辑器上

Question

我想在工具栏Tinymce编辑器上添加一个“插入按钮”。

我想要的一个示例：

一个我想要的示例

使用工具栏按钮，我会喜欢在我的编辑器中创建一个按钮并更改其样式。 （就像Gutenberg编辑器一样）

gutenberg编辑器

使用Tinymce编辑器，我具有此代码：

function wpc_boutons_tinymce($buttons) {
            $buttons[] = 'underline';
            $buttons[] = 'fontselect';
            $buttons[] = 'fontsizeselect';
            $buttons[] = 'edit-block';
            return $buttons;
        }


        add_filter("mce_buttons_3", "wpc_boutons_tinymce");

            $content = '';
            $editor_id = 'mycustomeditor';
            $settings = array( 
                'wpautop' => false, 
                'media_buttons' => false, 
                'quicktags' => array(
                        'buttons' => 'strong,em,del,ul,ol,li,block,close'
                    ),
            );
            wp_editor( $content, $editor_id, $settings );

我没有找到该怎么做，你能帮我吗？

Answer 1

这是我实施的代码，请按照步骤

粘贴主题中的代码 functions.php

add_action( 'init', 'wptuts_buttons' );
function wptuts_buttons() {
    add_filter( "mce_external_plugins", "wptuts_add_buttons" );
    add_filter( 'mce_buttons', 'wptuts_register_buttons' );
}
function wptuts_add_buttons( $plugin_array ) {
    $plugin_array['wptuts'] = get_template_directory_uri() . '/wptuts-editor-buttons/wptuts-plugin.js';
    return $plugin_array;
}
function wptuts_register_buttons( $buttons ) {
    array_push( $buttons, 'dropcap', 'showrecent' ); // dropcap', 'recentposts
    return $buttons;
}

require( 'wptuts-editor-buttons/wptuts.php' );

在您的主题根文件中创建一个文件夹，名为 wptuts-editor buttons
然后在 wptuts-editor buttons 中创建一个名为 wptuts.php 的文件，然后粘贴代码

<?php
 
add_shortcode( 'recent-posts', 'wptuts_recent_posts' );
function wptuts_recent_posts( $atts ) {
    extract( shortcode_atts( array(
        'numbers' => '5',
    ), $atts ) );
    $rposts = new WP_Query( array( 'posts_per_page' => $numbers, 'orderby' => 'date' ) );
    if ( $rposts->have_posts() ) {
        $html = '<h3>Recent Posts</h3><ul class="recent-posts">';
        while( $rposts->have_posts() ) {
            $rposts->the_post();
            $html .= sprintf(
                '<li><a href="%s" title="%s">%s</a></li>',
                get_permalink($rposts->post->ID),
                get_the_title(),
                get_the_title()
            );
        }
        $html .= '</ul>';
    }
    wp_reset_query();
    return $html;
}

另外，您需要在 wptuts-editor buttons ＆gt中创建一个JS文件。 wptuts-plugin.js 并粘贴代码

(function() {
    tinymce.create('tinymce.plugins.Wptuts', {
        init : function(ed, url) {
            ed.addButton('dropcap', {
                title : 'DropCap',
                cmd : 'dropcap',
                image : url + '/dropcap.jpg'
            });
 
            ed.addButton('showrecent', {
                title : 'Add recent posts shortcode',
                cmd : 'showrecent',
                image : url + '/images.jpg'
            });
 
            ed.addCommand('dropcap', function() {
                var selected_text = ed.selection.getContent();
                var return_text = '';
                return_text = '<span class="dropcap">' + selected_text + '</span>';
                ed.execCommand('mceInsertContent', 0, return_text);
            });
 
            ed.addCommand('showrecent', function() {
                var number = prompt("How many posts you want to show ? "),
                    shortcode;
                if (number !== null) {
                    number = parseInt(number);
                    if (number > 0 && number <= 20) {
                        shortcode = '[recent-post number="' + number + '"/]';
                        ed.execCommand('mceInsertContent', 0, shortcode);
                    }
                    else {
                        alert("The number value is invalid. It should be from 0 to 20.");
                    }
                }
            });
        },
        // ... Hidden code
    });
    // Register plugin
    tinymce.PluginManager.add( 'wptuts', tinymce.plugins.Wptuts );
})();

整个解决方案我遵循了文章