為wordpress經典編輯器添加自定義按鈕

by

此前找到一個插件Visual Editor Custom Buttons是專門用來添加自定義按鈕的，但是這個一年前停更的插件已經不能用了。

網上找到兩篇中文資料，一篇是2012年的，一篇是2018年的，都挺有用的。

說明wordpress的架構挺穩定的，多少年了還是能用。懷疑前面找的那個插件一開始就是壞的。

具體代碼

首先在snippets中增加以下php代碼（注意custombtn.js的路徑要更改成你當前要傳的地址）：

function ej_custom_button_scripts($pluarray)
{
    $plugin_array["custom_button"] =  "/wp-content/uploads/2024/11/custombtn.js";
    return $plugin_array;
}
function ej_add_custom_buttons($buttons)
{
    array_push($buttons, "ij");
    return $buttons;
}
function ej_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", "ej_custom_button_scripts");
    add_filter("mce_buttons", "ej_add_custom_buttons");
}
add_action( 'init', 'ej_custom_buttons_register' );

之後就寫custombtn.js，其中的「光標移動cursorGo()」代碼是前面兩個博客沒有的。

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

        //url argument holds the absolute url of our plugin directory
        init : function(ej, url) {
		function cursorGo (index = 4) {
			var selection = ej.selection;
			var start = selection.getRng().startOffset;
			var end = selection.getRng().endOffset;
			selection.getRng().setStart(selection.getRng().startContainer, index);
			selection.getRng().setEnd(selection.getRng().endContainer, index);
			selection.setRng(selection.getRng());
		};

            //add new button
            ej.addButton("ij", { title : "ij", cmd : "ij", text: "ij", });

            //button functionality
            ej.addCommand("ij", function() {
                var selected_text = ej.selection.getContent();
                var return_text = "[ ij]" + selected_text + "[ /ij]";
                ej.execCommand("mceInsertContent", 0, return_text);
                cursorGo();
            });

        },

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

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

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

😖友情提示＆手動升級

如果每次更改都往媒體庫上傳一個js文件，那是有點麻煩，解決辦法是，在本地構建一個php環境，之後搭建一個wordpress網站鏡像，然後在本地操作，就會方便很多。

即使不是為了增加這個功能，對於網主而言，本地搭建一個網站備份也是必要的。尤其是要手動升級的時候。

Views: 11

Leave a Comment