文档章节

wordpress富文本编辑器添加按钮

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

WordPress 4.8.1 发布,增加单独的 HTML 小工具

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

王练 ⋅ 2017/08/03 ⋅ 2

UEditor(百度富文本编辑器)的暴力使用

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

issac宝华 ⋅ 2016/06/23 ⋅ 0

仅用1行核心JS代码实现一个轻量级富文本编辑器

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

zhleven ⋅ 2017/11/06 ⋅ 0

移动端富文本编辑器--Eleditor

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

小小鸟e ⋅ 2017/06/04 ⋅ 4

不重新编译DLL,让FCKEditor支持附件上传

最近在忙着做一个小项目,就是一个企业内部的论坛,其中最基本的一点就是富文本编辑帖子和回帖。目前市面上用的比较多的富文本编辑器有: FreeTextBox 一个有很多年历史的富文本编辑器了,使...

浣熊干面包 ⋅ 2012/01/12 ⋅ 0

iOS富文本编辑器之更"优雅的"实现方法

原文出处:五阿哥永琪 前言:最近帮公司的一名程序员搞一个项目的收尾工作,差一个富文本编辑器功能未实现,时间紧迫,调研了下网上的解决方法均较为繁琐. 不得已找了个别门来实现该问题,且看下文...

秦无炎 ⋅ 2016/12/15 ⋅ 0

人人都会写的富文本编辑器

这个本来是给 vm-manager 写的一个富文本编辑器,后来觉得独立出来维护比较方便,就单独分离出来放到NPM。之所以说人人都会写, 是因为这个组件实现起来确实比较简单,不需要很厉害的Js水平,...

JesseLuo ⋅ 2017/08/07 ⋅ 0

redmine富文本编辑器里面怎么不能添加图片

如题?问一下,新建bug时那个富文本编辑器看上去有加图片的按钮,但为何点击后就两个“!”?

喜之郎 ⋅ 2014/07/05 ⋅ 5

最新整合阿里云OSS方法-phpcms

1、为简化整合步骤,使用该方法整合后,默认是所有图片、附件都要上传至OSS,并未在后台设置中添加是否启用OSS的开关。 2、上传的图片或附件,还是会在PHPCMS所在服务器保留一份。主要是基于...

豆花饭烧土豆 ⋅ 2016/11/10 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

645. Set Mismatch - LeetCode

Question 645. Set Mismatch Solution 思路: 遍历每个数字,然后将其应该出现的位置上的数字变为其相反数,这样如果我们再变为其相反数之前已经成负数了,说明该数字是重复数,将其将入结果r...

yysue ⋅ 18分钟前 ⋅ 0

Confluence 6 从生产环境中恢复一个测试实例

请参考 Restoring a Test Instance from Production 页面中的内容获得更多完整的说明。 很多 Confluence 的管理员将会使用生产实例运行完整数据和服务的 Confluence 服务器,同时还会设置一个...

honeymose ⋅ 23分钟前 ⋅ 0

Python这么强?红包杀手、消息撤回也可以无视,手机App辅助!

论述 标题也许有点不好理解,其实就是一款利用Python实现的可以监控微信APP内的红包与消息撤回的助手。不得不说,这确实是一款大家钟意的神器。 消息撤回是一件很让人恶心的事,毕竟人都是有...

Python燕大侠 ⋅ 34分钟前 ⋅ 0

压缩打包介绍、gzip压缩工具、bzip2压缩工具、xz压缩工具

压缩打包介绍 压缩的好处不仅能节省磁盘空间而且在传输的时候节省传输时间和网络带宽 windows系统下文件带有 .rar .zip .7z 后缀的就是压缩文件 linux系统下则是 .zip, .gz, .bz2, .xz, ...

黄昏残影 ⋅ 39分钟前 ⋅ 0

观察者模式

1.利用java原生类进行操作 package observer;import java.util.Observable;import java.util.Observer;/** * @author shadow * @Date 2016年8月12日下午7:29:31 * @Fun 观察目标 **/......

Cobbage ⋅ 41分钟前 ⋅ 0

Ubuntu打印服务器配置

参考:https://blog.csdn.net/gsls200808/article/details/50950586 https://blog.csdn.net/jiay2/article/details/80252369 https://wiki.gentoo.org/wiki/HPLIP 由于媳妇儿要大量打印资料,......

大熊猫 ⋅ 47分钟前 ⋅ 0

面试的角度诠释Java工程师(二)

原文出处: locality 续言: 相信每一位简书的作者,都会有我这样的思考:怎么写好一篇文章?或者怎么写好一篇技术类的文章?我就先说说我的感悟吧,写文章其实和写程序是一样的。为什么我会...

颖伙虫 ⋅ 50分钟前 ⋅ 0

github中SSH的Key

https://help.github.com/articles/connecting-to-github-with-ssh/ https://help.github.com/articles/testing-your-ssh-connection/ https://help.github.com/articles/adding-a-new-ssh-k......

whoisliang ⋅ 50分钟前 ⋅ 0

only_full_group_by

我的mysql是在CentOS7.1下面的5.7.17 在 /etc/my.cnf 文件里加上如下: sql_mode='NO_ENGINE_SUBSTITUTION' 然后,重启Mysql服务 systemctl restart mysqld...

SunHacker ⋅ 今天 ⋅ 0

实际项目(SpringBoot项目)中集成Druid

参考网页 https://blog.csdn.net/liuchuanhong1/article/details/55050131 https://blog.csdn.net/CoffeeAndIce/article/details/78707819 https://www.pocketdigi.com/20170530/1577.html 为......

karma123 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部