将短代码按钮添加到工具栏

时间:2021-02-27 13:02:41

标签: javascript jquery wordpress tinymce toolbar

我想向 tinymce 添加一个按钮,该按钮将一个短代码添加到 前端 的文本区域。

这个脚本的后端效果很好(-特殊标签-在后端工作)!

我在 functions.php

中声明了一个新按钮
function wdm_add_mce_button() {
            // 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', 'wdm_add_tinymce_plugin' );
               add_filter( 'mce_buttons', 'wdm_register_mce_button' );
               }
}
add_action('admin_head', 'wdm_add_mce_button');

// register new button in the editor
function wdm_register_mce_button( $buttons ) {
            array_push( $buttons, 'wdm_mce_button' );
            return $buttons;
}


// declare a script for the new button
// the script will insert the shortcode on the click event
function wdm_add_tinymce_plugin( $plugin_array ) {
          $plugin_array['wdm_mce_button'] = get_stylesheet_directory_uri() .'/js/wdm-mce-button.js';
          return $plugin_array;
}

jQuery 部分:

(function() {
        tinymce.PluginManager.add('wdm_mce_button', function( editor, url ) {
           editor.addButton( 'wdm_mce_button', {
                 text: 'Special Tags',
                 icon: false,
                 type: 'menubutton',
                 menu: [
                       {
                        text: 'Update Tag',
                        onclick: function() {
                           editor.insertContent('[update][/update]');
                                  }
                        },
                       {
                        text: 'Test Tag',
                        onclick: function() {
                           editor.insertContent('[test][/test]');
                                 }
                       }
                       ]
              });
        });
})();

前端创建者:

<div class="form-group">
    <div class="card " id="package-description">
        <div class="card-header">
            <strong><?php _e("Description", "download-manager"); ?></strong></div>
            <div class="card-body-desc">
                <?php $cont = isset($post) ? $post->post_content : '';
                wp_editor(wpautop(stripslashes($cont)),'post_content', array('textarea_name' => 'pack[post_content]', 'teeny' => 1, 'media_buttons' => 0,
                    'tinymce' => array('toolbar1' => 'bold,italic,underline,strikethrough,bullist,link,unlink'),

                    'quicktags' => false, 'textarea_rows' => 15)); ?>
                </div>

            </div>
        </div>

我尝试将 wdm_mce_button 添加到这一行,但 不起作用

'tinymce' => array('toolbar1' => 'bold,italic,underline,strikethrough,bullist,link,unlink,wdm_mce_button'),

当我禁用“teeny”时,-Special Tags- 也不会出现在前端编辑器中。

我做错了什么?

0 个答案:

没有答案