为WordPress 默认编辑器 TinyMCE 添加自定义按钮，实现点击按钮插入指定的代码

WordPress 经典编辑器是一个非常流行的编辑器，但是它的默认功能有限。

如果你想要添加一些自定义按钮，那么你需要进行一些额外的设置。

在本文中，我们将介绍如何添加自定义按钮到WordPress 经典编辑器

效果预览：

我这里添加了三个按钮，实现了插入两个短代码和一个谷歌广告代码

前面的两个短代码是为前面做的WordPress 主题文章添加点击/展开阅读全文功能，扩展开使用的，因为这个每次添加展开的短代码要手动输入（我个人比较懒），所以就搞了个这个编辑器按钮来插入

这是第一个按钮

这是第二个按钮

这是第三个按钮

首先，你需要在你的WordPress主题目录的functions.php文件合适位置添加如下代码：

//这样写的话，JS文件就要放在主题目录的根目录下
 
$plugin_array['myadvert'] = 'get_bloginfo( 'template_url' ) . '/button.js';      //按钮的js路径

然后我们添加按钮的JS文件，我们命名为button.js 代码如下：
这个JS文件在这里可能显示不太全，源文件可直接在本文底部下载

(function(tinymce) {   

    tinymce.create('tinymce.plugins.myadvert', { 

        init : function(ed, url) {   

            ed.addButton('myadvert', { //注意这是第一个按钮   

                title : '点击展开阅读开始',  

image : 'http://static.77388.cn/images/collapse.png', //注意图片的路径 url是当前js的路径   

                onclick : function() {   

                     ed.selection.setContent('

        

             
            

        
        
'); //这里是你要插入到编辑器的内容，你可以直接写上广告代码  

                }   

            }); 
            ed.addButton('myadvert1', { //注意这是第二个按钮   

                title : '点击展开阅读结束',  

image : 'http://static.77388.cn/images/collapse.png', //注意图片的路径 url是当前js的路径   

                onclick : function() {   

                     ed.selection.setContent('
        

        >>>>>>点击展开阅读全文<<<<<<
        
    
'); //这里是你要插入到编辑器的内容，你可以直接写上广告代码  

                }   

            });
            ed.addButton('myadvert2', { //注意这是第三个按钮   

                title : '插入谷歌广告',  

image : 'http://static.77388.cn/images/google-ads.png', //注意图片的路径   

                onclick : function() {   

                     ed.selection.setContent('<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2791818238800279" crossorigin="anonymous"></script><ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-2791818238800279" data-ad-slot="8294182519"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>'); //这里是你要插入到编辑器的内容，你可以直接写上广告代码  

                }   

            }); 

        },   

     createControl : function(n, cm) {   

          return null;   

        },   

    });   

    tinymce.PluginManager.add('myadvert', tinymce.plugins.myadvert); //注意这里是按钮的字段，默认情况请勿修改   

})(window.tinymce);  // JavaScript Document

注意：按钮图片路径可以用绝对路径，如上面的代码，也可以用相对路径，相对路径的写法如下：

//这样写，按钮图片就要放在主题目录的根目录下

image : url+'/button.png', //注意按钮图片的路径

//注意：这里的url是使用了本地js路径方式，获取的url是主题目录

代码安装完成后，进入你的文章编辑页面，就可以看到编辑器的工具栏中出现你刚才添加的按钮了

总之，添加自定义按钮到WordPress 经典编辑器并不难。

你也可以安装一个插件，使用插件来控制编辑器的按钮，但是添加后好像不太稳定，会造成发布文章卡顿。

最直接的方式还是编写一些代码，然后保存即可。

本站原创，转载请注明出处及链接