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

WordPress 经典编辑器是一个非常流行的编辑器,但是它的默认功能有限。 如果你想要添加一些自定义按钮,那么你需要进行一些额外的设置。 在本文中,我们将介绍如何添加自定义按钮到WordPress 经典编辑器

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

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

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

 

效果预览:

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

 

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

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

这是第一个按钮

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

这是第二个按钮

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

这是第三个按钮

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

 

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

注:JS文件可以用绝对路径,也可以用相对路径,用相对路径的写法如下:

//这样写的话,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('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 经典编辑器并不难。

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

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

 

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

下载权限

查看
  • 免费下载
    评论并刷新后下载
    登录后下载

查看演示

  • {{attr.name}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 评论后刷新页面下载评论 支付以后下载 请先登录 您今天的下载次数(次)用完了,请明天再来 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您已获得下载权限 您可以每天下载资源次,今日剩余
免责说明

本站资源部分来自网友投稿,如有侵犯你的权益请联系管理员或给邮箱发送邮件PubwinSoft@foxmail.com 我们会第一时间进行审核删除。
站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除!


如果遇到评论下载的文章,评论后刷新页面点击对应的蓝字按钮即可跳转到下载页面
本站资源少部分采用7z压缩,为防止有人压缩软件不支持7z格式,7z解压,建议下载7-zip,zip、rar解压,建议下载WinRAR

给TA打赏
共{{data.count}}人
人已打赏
WordPress教程

WordPress博客完整搬家域名替换教程

2023-4-20 14:34:07

ChatGPTWordPress教程

用Agent GPT写了个WordPress监控评论并使用ChatGPT回复评论的插件

2023-4-23 15:55:44

3 条回复 A文章作者 M管理员
  1. 妙妙喵

    似乎等待了一百年,突然明白:即使再见面,成熟地表演,不如不见。

  2. lstyle

    正好需要添加编辑器按钮

  3. Java小白菜

    学习学习

个人中心
购物车
优惠劵
有新私信 私信列表
搜索