为wordpress的TinyMCE编辑器添加自定义短代码按钮

我们以添加腾讯视频短代码按钮为例:
首先,注册短代码,在functions.php中添加如下代码

//一段代码让wordpress引用腾讯视频不再有广告
function v_qq_video($atts, $content=null) {
    extract(shortcode_atts(array("vids" => ''), $atts));
    $url = 'https://vv.video.qq.com/getinfo?vids='.$vids.'&platform=101001&charge=0&otype=json';
    $json = file_get_contents($url);
    preg_match('/^QZOutputJson=(.*?);$/',$json,$json2);
    $tempStr = json_decode($json2[1],true);
    $vurl = 'https://ugcws.video.gtimg.com/'.$tempStr['vl']['vi'][0]['fn']."?vkey=".$tempStr['vl']['vi'][0]['fvkey'];
      $video = '<video style="width: 100%;" controls src="'.$vurl.'" poster="https://puui.qpic.cn/qqvideo_ori/0/'.$vids.'_496_280/0"></video>';
    return $video;
}
add_shortcode('tx-video', 'v_qq_video');

然后在继续在主题的functions.php中添加如下代码:

/**扩展TinyMCE编辑器,添加自定义按钮及功能**/
add_action( 'admin_init', 'my_tinymce_button' );

function my_tinymce_button() {
     if ( current_user_can( 'edit_posts' ) && current_user_can( 'edit_pages' ) ) {
          add_filter( 'mce_buttons', 'my_register_tinymce_button' );
          add_filter( 'mce_external_plugins', 'my_add_tinymce_button' );
     }
}

function my_register_tinymce_button( $buttons ) {
     array_push( $buttons, "button_eek", "button_green" );
     return $buttons;
}

function my_add_tinymce_button( $plugin_array ) {
     $plugin_array['my_button_script'] = get_bloginfo('template_directory') . "/static/js/editor.js";
     return $plugin_array;
}

最后,在主题文件夹的/static/js目录下新增一个editor.js文件,代码如下:

(function() {
     /* Register the buttons */
     tinymce.create('tinymce.plugins.MyButtons', {
          init : function(ed, url) {
               /**
               * Inserts TencentVideo content
               */
               ed.addButton( 'button_eek', {
                    text : 'Insert TencentVideo',
                    title : 'Insert TencentVideo',
                    onclick : function() {
                         ed.selection.setContent('[tx-video vids= ]');
                    }
               });
               /**
               * Adds HTML tag to selected content
               */
               ed.addButton( 'button_green', {
                    text : 'Add H3 Title',
                    title : 'Add H3 Title',
                    cmd: 'button_green_cmd'
               });
               ed.addCommand( 'button_green_cmd', function() {
                    var selected_text = ed.selection.getContent();
                    var return_text = '';
                    return_text = '<h3>' + selected_text + '</h3>';
                    ed.execCommand('mceInsertContent', 0, return_text);
               });
          },
          createControl : function(n, cm) {
               return null;
          },
     });
     /* Start the buttons */
     tinymce.PluginManager.add( 'my_button_script', tinymce.plugins.MyButtons );
})();

效果如图:
为wordpress的TinyMCE编辑器添加自定义短代码按钮

 

这里还有一个插件也可以实现在TinyMCE编辑器中添加自定义短代码按钮的功能:

How to add a shortcode button to the TinyMCE editor?

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注