文档章节

wordpress富文本编辑器添加按钮

喵先生丿
 喵先生丿
发布于 2017/02/28 11:38
字数 435
阅读 179
收藏 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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

InvalidKeyException: Illegal key size

Caused by: java.lang.RuntimeException: java.security.InvalidKeyException: Illegal key size 解决方案:去官方下载JCE无限制权限策略文件。 jdk 5: http://www.oracle.com/technetwork/j......

自由的开源
11分钟前
0
0
JAVA秒杀实现以及优化原理

秒杀与其他业务最大的区别在于:秒杀的瞬间, (1)系统的并发量会非常的大 (2)并发量大的同时,网络的流量也会瞬间变大。 关于(2),最常用的办法就是做页面静态化,也就是常说的前后端分...

小贱是个程序员
15分钟前
1
0
Spring Aop之Advisor解析

在上文Spring Aop之Target Source详解中,我们讲解了Spring是如何通过封装Target Source来达到对最终获取的目标bean进行封装的目的。其中我们讲解到,Spring Aop对目标bean进行代理是通过Ann...

爱宝贝丶
18分钟前
0
0
Java高级工程师面试阿里,阿里云,天猫,菜鸟,涉及到的知识点

前言: 分享 Java高级工程师面试阿里,阿里云,天猫,菜鸟,涉及到的知识点,文章有点长,但比较全面,阅读时间15分钟左右,干货满满。 一、HashMap的那些事 1.1、HashMap的实现原理 1.1.1、...

Java大蜗牛
43分钟前
2
0
nginx模块学习五 expires 浏览器缓存

缓存原理 语法 Syntax: expires [modified] time;expires epoch | max | off;Default: expires off;Context: http,server,location,if in location 例/etc/nginx/conf.d/default.con......

Romanceling
53分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部