【WordPress 教程】WordPress编辑器增强—快捷短代码

孤狼

171
文章

118
评论

2019年6月11日14:01:023618,829 4545字阅读15分9秒

摘要

此功能更加方便，为WordPress编辑短代码功能增强,可按个人喜好自行修改添加，可以让你更方便的添加!

【代码部署】

将代码丢到主题 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;}