文档章节

wordpress富文本编辑器添加按钮

喵先生丿
 喵先生丿
发布于 2017/02/28 11:38
字数 435
阅读 197
收藏 0
  • 需求描述:
  • 在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('<iframe frameborder="0" width="99%" height="498" src="http://player.youku.com/embed/' + videoId + '" allowfullscreen></iframe> ');
                                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('<iframe frameborder="0" width="99%" height="498" src="http://v.qq.com/iframe/player.html?vid=' + videoId +  '&tiny=0&auto=0" allowfullscreen></iframe> ');
                                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('<iframe frameborder="0" width="99%" height="498" src="' + videoUrl + '" allowfullscreen></iframe> ');
                    }
                });
            }
        });
    });
})();

© 著作权归作者所有

共有 人打赏支持
喵先生丿
粉丝 3
博文 14
码字总数 5275
作品 0
天津
程序员
私信 提问
量子幽灵/Ueditor For WordPress

强大的百度开源富文本编辑器Ueditor正式登陆wordpress! 此插件最早由taoqili开发,SamLiu改进,但两位作者均不再发布更新版本,大山在此基础上更新到Ueditor1.4.3。在此感谢两位前辈的付出。...

量子幽灵
2016/02/04
0
0
WordPress 4.8.1 发布,增加单独的 HTML 小工具

刚刚,WordPress 开发团队发布了 WordPress 4.8.1 维护升级版本,增加了一个单独的 HTML 小工具,来解决 WordPress 4.8 版本中文本小工具的问题。 今年 6 月份发布的 WordPress 4.8 正式版,...

王练
2017/08/03
1K
2
UEditor(百度富文本编辑器)的暴力使用

1.下载sdk 下载链接:http://ueditor.baidu.com/website/download.html Tip:这里下载的是UTF-8版本的。 解压可以看到一个示例文件index.html,可以双击打开该文件,就可以看到富文本编辑器的...

issac宝华
2016/06/23
997
0
仅用1行核心JS代码实现一个轻量级富文本编辑器

欢迎光临我的博客拓跋的前端客栈,这个是原文地址。如果您发现我文章中存在错误,请尽情向我吐槽,大家一起学习一起进步φ(>ω<*) 引子 富文本编辑器是我们在生活中非常常用到的编辑工具,现...

zhleven
2017/11/06
0
0
移动端富文本编辑器--Eleditor

由于移动设备的交互方式,传统的PC富文本编辑器在移动手机、平板上面无法达到良好的操作体验,Eleditor(element editor)顾名思义,旨在对html元素进行操作编辑,实现了唯一开源的真正所见即...

小小鸟e
2017/06/04
3.8K
4

没有更多内容

加载失败,请刷新页面

加载更多

Spring源码学习笔记-1-Resource

打算补下基础,学习下Spring源码,参考书籍是《Spring源码深度解析》,使用版本是Spring 3.2.x,本来想试图用脑图记录的,发现代码部分不好贴,还是作罢,这里只大略记录下想法,不写太细了 ...

zypy333
今天
10
0
RestClientUtil和ConfigRestClientUtil区别说明

RestClientUtil directly executes the DSL defined in the code. ConfigRestClientUtil gets the DSL defined in the configuration file by the DSL name and executes it. RestClientUtil......

bboss
今天
17
0

中国龙-扬科
昨天
2
0
Linux系统设置全局的默认网络代理

更改全局配置文件/etc/profile all_proxy="all_proxy=socks://rahowviahva.ml:80/"ftp_proxy="ftp_proxy=http://rahowviahva.ml:80/"http_proxy="http_proxy=http://rahowviahva.ml:80/"......

临江仙卜算子
昨天
11
0
java框架学习日志-6(bean作用域和自动装配)

本章补充bean的作用域和自动装配 bean作用域 之前提到可以用scope来设置单例模式 <bean id="type" class="cn.dota2.tpye.Type" scope="singleton"></bean> 除此之外还有几种用法 singleton:......

白话
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部