WordPress经典编辑器添加按钮、自定义功能教程

本文以一个超简明的实例,介绍如何在wordpress后台编辑器Tinymce的工具栏上添加一个按钮,并实现自定义功能。

本文以一个超简明的实例,介绍如何在wordpress后台编辑器Tinymce的工具栏上添加一个按钮,并实现自定义功能。

我们以wordpress插件形式来实现,方便一些。

最后提供实例源码下载,重要的部分写注释里了。

功能规划

1. 在编辑器工具栏上添加一个文字形式的按钮,点击以后在光标位置插入“版权”。

2. 在编辑器工具栏上添加一个图标形式的按钮,点击以后输入代码高亮。

步骤总结

1. 在wordpress中添加按钮

2. 在js里面写按钮的动作

在wordpress中添加按钮

// 关联js文件
function az_custom_button_scripts($pluarray)
{
// 这个custom_button必须和后面js文件中tinymce.PluginManager.add("custom_button") 相同
$plugin_array["custom_button"] = plugin_dir_url(__FILE__) . "/custom-editor-buttons.js";
return $plugin_array;
}
function az_add_custom_buttons($buttons)
{
// 添加按钮名称,与js文件里面 ed.addButton("helloworld") 相同
array_push($buttons, "rectxt");
array_push($buttons, "percode");
return $buttons;
}
function az_custom_buttons_register() {
// 校验权限
if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
return;
}
if ( get_user_option( 'rich_editing' ) !== 'true' ) {
return;
}
// 添加钩子
add_filter("mce_external_plugins", "az_custom_button_scripts");
add_filter("mce_buttons", "az_add_custom_buttons");
}
add_action( 'init', 'az_custom_buttons_register' );

在js里面写按钮的动作


(function() {
    tinymce.create("tinymce.plugins.custom_button", {

        //url argument holds the absolute url of our plugin directory
        init : function(ed, url) {

            //add new button
            ed.addButton("rectxt", {
                title : "插入文章来源",
                cmd : "rectxtCommand",
                text: "插入文章来源",
            });
            ed.addButton("percode", {
                title : "插入代码高亮
",
                cmd : "percodeCommand",
                image : url + "/icons/textblue.png",
            });

            //button functionality.
            ed.addCommand("rectxtCommand", function() {
                var return_text = "文章来源:
本文系网友投稿,版权归投稿者所有,如需转载请注明出处!"; ed.execCommand("mceInsertContent", 0, return_text); }); ed.addCommand("percodeCommand", function() { var return_text = "
";
                ed.execCommand("mceInsertContent", 0, return_text);
            });
            
            

        },

        createControl : function(n, cm) {
            return null;
        },

        getInfo : function() {
            return {
                longname : "AZ Custom Editor Buttons",
                author : "Aspirant Zhang",
                version : "1"
            };
        }
    });

    tinymce.PluginManager.add("custom_button", tinymce.plugins.custom_button);
})();

如图:

WordPress经典编辑器添加按钮、自定义功能教程

WordPress经典编辑器添加按钮、自定义功能教程

WordPress经典编辑器添加按钮、自定义功能教程

下载权限

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

查看演示

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

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


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

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

WordPress 7B2 Pro主题实现首页搜索轮播背景

2023-3-30 16:09:01

WordPress插件

WordPress 7B2 Pro 主题统计插件

2023-4-2 15:15:53

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
有新私信 私信列表
搜索