Wordpress Zibll主题 前台编辑器扩展

许多用户想要前台发布文章可以支持后台古腾堡功能 添加表格 插入文章卡片等

本次提供了两种模块，前台插入表格和插入Zibll章模块

func代码

// 前台编辑器插入表单功能
function add_table_button_to_tinymce($buttons) 
{
    array_push($buttons, 'zyx_table');
    array_push($buttons, 'article_card');
    return $buttons;
}
add_filter('mce_buttons', 'add_table_button_to_tinymce');

function add_zyx_table_to_tinymce($plugin_array)
{
    $plugin_array['zyx_table'] = '自行修改js文件路径';
    $plugin_array['article_card'] = '自行修改js文件路径';
    return $plugin_array;
}
add_filter('mce_external_plugins', 'add_zyx_table_to_tinymce');

add_filter('mce_buttons_2', 'zyx_register_button_2', 20);
function zyx_register_button_2($buttons)
{
    $is_admin  = is_admin();
    if (!$is_admin) 
    {
        $buttons[] = 'zyx_table'; 
        $buttons[] = 'article_card'; 
    }
    return $buttons;
}

JS代码

(function() {
    tinymce.PluginManager.add('zyx_table', function(editor, url) {
        editor.addButton('zyx_table', {
            tooltip: '插入表格',
            icon: 'table',
            onclick: function() {
                editor.windowManager.open({
                    title: '插入表格',
                    body: [
                        {type: 'textbox', name: 'rows', label: '行数'},
                        {type: 'textbox', name: 'cols', label: '列数'}
                    ],
                    onsubmit: function(e) {
                        var rows = parseInt(e.data.rows, 10);
                        var cols = parseInt(e.data.cols, 10);
                        var tableHTML = '<table>';
                        for (var i = 0; i < rows; i++) {
                            tableHTML += '<tr>';
                            for (var j = 0; j < cols; j++) {
                                tableHTML += '<td></td>';
                            }
                            tableHTML += '</tr>';
                        }
                        tableHTML += '</table>';
                        editor.insertContent(tableHTML);
                    }
                });
            }
        });
    });
    
    tinymce.PluginManager.add('article_card', function(editor, url) {
        editor.addButton('article_card', {
            tooltip: '插入文章卡片',
            icon: 'paste',
            onclick: function() {
                editor.windowManager.open({
                    title: '插入文章卡片',
                    body: [
                        {
                            type: 'textbox',
                            name: 'article_id',
                            label: '文章ID',
                            spellcheck: false
                        }
                    ],
                    onsubmit: function(e) {
                        var articleId = e.data.article_id;
                        insertShortcodeCard(articleId);
                    }
                });
            }
        });
    
        function insertShortcodeCard(articleId) {
            var shortcode = ``;
            editor.insertContent(shortcode);
        }
    });
})();