wordpress富文本编辑器添加按钮

• 需求描述：
• 在wordpress富文本编辑器中，添加按钮，进行站外视频添加。

当前使用模板的function.php添加

// 挂载函数到正确的钩子
function my_add_mce_button() {
    // 检查用户权限
    if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
        return;
    }
    // 检查是否启用可视化编辑
    if ( 'true' == get_user_option( 'rich_editing' ) ) {
        add_filter( 'mce_external_plugins', 'my_add_tinymce_plugin' );
        add_filter( 'mce_buttons', 'my_register_mce_button' );
    }
}
add_action('admin_head', 'my_add_mce_button');

// 声明新按钮的脚本
function my_add_tinymce_plugin( $plugin_array ) {
    $plugin_array['iframe_video_button'] = get_template_directory_uri() .'/js/media_button.js';
    return $plugin_array;
}

// 在编辑器上注册新按钮
function my_register_mce_button( $buttons ) {
    array_push( $buttons, 'iframe_video_button' );
    return $buttons;
}

在当前使用模板的/js目录下创建media.buton.js

将下面代码复制到media.buton.js内

(function () {
    tinymce.PluginManager.add('iframe_video_button', function (editor, url) {
        editor.addButton('iframe_video_button', {
            text: '添加视频',
            icon: false,
            onclick: function () {
                //editor.insertContent('WPExplorer.com is awesome!');
                editor.windowManager.open({
                    title: '请输入视频地址',
                    body: [
                        {
                            type: 'textbox',
                            name: 'videoUrl',
                            minWidth: 400,
                            minHeight: 30,
                            multiline: true,
                            value: ''
                        }
                    ],
                    onsubmit: function (e) {
                        //获取输入内容
                        var str = e.data.videoUrl;
                        var videoUrl = '';
                        var pxStr = '';
                        if (str.indexOf('iframe') < 1) {
                            var videoId = '';

                            //直接输入浏览器地址处理
                            if (str.indexOf('youku') > 0) {
                                //优酷处理

                                //截取视频ID
                                str = str.substr(str.indexOf('id_') + 3);
                                videoId = str.substr(0, str.indexOf('.'));
                                //将地址拼接到iframe ，输出到编辑器
                                editor.insertContent(' ');
                                return true;
                            } else if (str.indexOf('qq') > 0) {
                                //腾讯视频处理

                                //截取视频ID
                                if(str.indexOf('vid') >0){
                                    videoId = str.substr(str.indexOf('vid')+4);
                                }else{
                                    str = str.substr(0, str.indexOf('.html'));
                                    videoId = str.substr(str.lastIndexOf('/') + 1);
                                }
                                //将地址拼接到iframe ，输出到编辑器
                                editor.insertContent(' ');
                                return true;
                            } else {
                                alert('输入地址错误，请重新输入');
                                return false;
                            }
                        }
                        //截取http之前一个标识符，方便配对结束标识符
                        pxStr = str.substr(str.indexOf('http') - 1, 1);
                        //截取前半部分地址
                        str = str.substr(str.indexOf('http'));
                        videoUrl = str.substr(0, str.indexOf(pxStr));

                        //将地址拼接到iframe ，输出到编辑器
                        editor.insertContent(' ');
                    }
                });
            }
        });
    });
})();

转载于:https://my.oschina.net/meaoo/blog/847598