wordpress编辑器添加按钮/自定义功能简明教程

最近在折腾worpdress主题,不过Wordpress编辑器的一些功能还是有所欠缺的,正好发现一篇介绍如何给wordpress添加自定义按钮的文章,所转载过来。

推荐阅读:

正文如下:

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

我们以wordpress插件形式来实现,方便一些。后面提供实例源码下载,重要的部分我写注释里了。

功能规划

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

2. 在编辑器工具栏上添加一个图标形式的按钮,点击以后将所选文字颜色改为蓝色。

步骤总结

1. 在wordpress中添加按钮

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

在wordpress中添加按钮

将如下PHP代码添加到你使用的主题的functions.php内,一般放到末尾即可!

// 关联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, "helloworld");
    array_push($buttons, "textblue");
    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("helloworld", {
                title : "插入一句helloworld",
                cmd : "helloworldCommand",
                text: "HELLO WORLD",
            });
            ed.addButton("textblue", {
                title : "所选文字设置为蓝色",
                cmd : "textblueCommand",
                image : url + "/icons/textblue.png",
            });
            //button functionality.
            ed.addCommand("helloworldCommand", function() {
                var return_text = "Hello World!";
                ed.execCommand("mceInsertContent", 0, return_text);
            });
            ed.addCommand("textblueCommand", function() {
                var selected_text = ed.selection.getContent();
                var return_text = "<span style=\"color: blue;\">"+selected_text+"</span>";
                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编辑器添加按钮/自定义功能简明教程

实例下载

地下室博客先生本地直连下载:custom-button-demo

本文转载自:https://www.aspirantzhang.com/network/wordpress-editor-custom-button.html

未经允许不得转载:地下室先生博客 » wordpress编辑器添加按钮/自定义功能简明教程

赞 (0) 打赏作者

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏