【代码部署】
- 将代码丢到主题 functions.php 文件中即可:
- 图标fa fa-tasks可自行修改
- 如要自定义可删除//解析短代码即可。
【JS文件】
- 将JS文件放到上述代码位置中默认为/js/mce-button.js可自行修改
- 图标,自己去下载一个16*16的png图片取名info.png上传到和js同文件夹里面即可。
- 也可以将imgage删除修改icon: false,为icon: 'editimage',
短代码按钮JS文件展开
(function() { tinymce.PluginManager.add('wd_mce_button', function( editor, url ) { editor.addButton( 'wd_mce_button', { text: false, icon: false, title : '短代码', image: url + "/info.png", type: 'menubutton', menu: [ { text: '灰色项目面板', onclick: function() { editor.insertContent('[task]内容[/task]'); } }, { text: '红色禁止面板', onclick: function() { editor.insertContent('[noway]内容[/noway]'); } }, { text: '黄色警告面板', onclick: function() { editor.insertContent('[warning]内容[/warning]'); } }, { text: '蓝色清新面板', onclick: function() { editor.insertContent('[buy]内容[/buy]'); } }, ] }); }); })();
添加视频的按钮JS文件展开
(function () { tinymce.PluginManager.add('iframe_video_button', function (editor, url) { editor.addButton('iframe_video_button', { text: false, icon: 'media', title : '添加视频', 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> '); } }); } }); }); })();
【CSS样式】
.shortcodestyle{margin:20px 0px;padding: 15px 15px 15px 40px;position: relative;-moz-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2); -webkit-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2); box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2);border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-khtml-border-radius:5px;} .shortcodestyle i{padding-right: 20px;} .shortcodestyle a{padding:5px;} .shortcodestyle a:hover{background:none;border-radius:0px;-webkit-border-radius:0px;-moz-border-radius:0px;-khtml-border-radius:0px;} .warning{background:#FFEA97;color: #9F6F26;} .noway{background:#EFCEC9;color: #820B0B;} .buy{background: #9dd7e8; color: #03536b;} .task{background: #E7E7E7; color: #333;} .shortcodestyle,.warning,.noway,.buy,.task p{text-indent: 0;}
继续阅读
- 我的微信
- 这是我的微信扫一扫
-
- 我的微信公众号
- 我的微信公众号扫一扫
-
2021年10月15日 02:15 35楼
你要相信明天,一定会更好的,更好的把你虐成狗。
2021年10月15日 02:14 34楼
看看 学习下
2021年8月7日 22:35 33楼
当你变得足够优秀的时候,你才发现原来她只是,单纯的不喜欢你。
2021年6月29日 22:07 32楼
测试看看咋回事!
2021年6月29日 22:06 31楼
你要相信明天,一定会更好的,更好的把你虐成狗。