WordPress TinyMCE编辑器自定义按钮

淮城一只猫 · · 205次浏览 ·

前言

这几天我在折腾主题发现,还是感觉WordPress自带的编辑器好用,于是放弃原来的Markdown编辑写作了。所以现在遇到输入代码的一堆麻烦,我可不想慢慢手动敲打源代码,真的累死。你可能说用短代码不就可以了吗?但是对我来说好好一篇文章插入短代码真的很丑,假如不解析的话。如果TinyMCE编辑器支持一键输入最好了,于是搜索相关的资料的确搜到一些可操作的方式。

折腾

不管怎么样我们需要一步一步来,想让WP编辑器注入按钮的支持,然后在按钮添加相关组件支持。

首先我们先要新建一个JS文件,名叫expand.js打开编文件复制:

(function (window, $) {
    'use strict';
    /**
     * Custom Trim function
     * @returns {string}
     */
    String.prototype.trim = function () {
        return this.replace(/^\s+|\s+$/g, '');
    };
    tinymce.PluginManager.add('note_assist_button', function (editor, url) {
        editor.addButton('note_assist_button', {
            title: '重要内容展示',
            text: '',
            type: false,
            icon: 'file-empty-icon',
            onclick: function () {
                editor.windowManager.open({
                    title: '内容展示',
                    width: 550,
                    height: 450,
                    body: [
                        {
                            type: 'listbox',
                            name: 'typebox',
                            label: '等级类型* :',
                            values: [
                                { text: '红色', value: 'warning' },
                                { text: '黄色', value: 'note' },
                                { text: '蓝色', value: 'good' }
                            ],
                            value: { text: '红色', value: 'warning' }
                        },
                        {
                            type: 'textbox',
                            name: 'postfield',
                            label: '展示内容*:',
                            multiline: true,
                            minHeight: 250,
                            value: '',
                            onclick: function (e) {
                                $(e.target).css('border-color', '');
                            }
                        }
                    ],
                    onsubmit: function (e) {
                        console.log(e);
                        var code = e.data.postfield.trim();
                        //内容不得为空
                        if (code === '') {
                            var windowId = this._id;
                            var inputs = $('#' + windowId + '-body').find('.mce-formitem textarea');
                            $(inputs.get(0)).css('border-color', 'red').focus();
                            return false;
                        }
                        var typebox = e.data.typebox;
                        //注入内容
                        code = code.replace(/</g, '<').replace(/>/g, '>');
                        editor.insertContent('<div class="'+ typebox +'"><p>'+ code +'</p></div>');
                    }
                });
            }
        });
    });
})(window, jQuery);

上面写的是基本的按钮事件,功能展示如下。

提醒:绝大部分参考文件wordpress\wp-includes\js\tinymce\plugins文件夹中,遇到有问题可以去这里看看

下面引入JS文件,我们在function.php加入以下代码:

/**编辑器扩展
 * @param $plugin_array
 * @return mixed
 */
function add_tinymce_plugin_expand($plugin_array){
    $plugin_array['note_assist_button'] = get_template_directory_uri() . '/pathto/expand.js';
    return $plugin_array;
}
function register_tinymce_button_expand($buttons) {
    array_push($buttons, "note_assist_button");
    return $buttons;
}
function add_admin_inline_style_expand($hook) {
    ?>
    <style type="text/css">.mce-i-file-empty-icon:before {
            content: '\f119';
            font: 400 20px/1 dashicons;
            padding: 0;
            vertical-align: top;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        } </style>
    <?php
}
add_filter("mce_external_plugins", "add_tinymce_plugin_expand");
add_filter('mce_buttons', "register_tinymce_button_expand");
add_action('admin_print_styles', "add_admin_inline_style_expand", 99);

直接hook即可。

提醒:我这里遇到图标的问题,不想引入第三方图片可以引入WP自带的:https://developer.wordpress.org/resource/dashicons

所以这样基本上的问题解决掉了。

参考链接:

https://codex.wordpress.org/Plugin_API/Filter_Reference/mce_external_plugins
https://codex.wordpress.org/TinyMCE_Custom_Buttons
https://www.tinymce.com/docs/api


淮城一只猫

永远年轻,永远热泪盈眶

1 个评论

跨境电商之家 · 2018年1月23日 - 下午6:29

支持老大~~~~~~~~

发表评论

电子邮件地址不会被公开。 必填项已用*标注

我不是机器人*