- 需求描述:
- 在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(' ');
}
});
}
});
});
})();