wangeditor富文本编辑器怎么让插入的表格可以合并单元格

wangeditor富文本编辑器默认是不支持合并单元格的，但是可以通过自定义插件实现。

具体步骤如下：

1. 在wangeditor官网下载最新版的wangeditor，并引入到项目中。

2. 在自己的项目中创建一个名为tableMerge的自定义插件。

// tableMerge.js
(function () {
    var tableMerge = {};
    tableMerge.init = function (editor) {
        editor.createMenu(function (check) {
            // 判断当前是否在表格内
            if (!check('inserttable')) return;
            var table = editor.getRangeElem().nodeName.toLowerCase() === 'table' ? editor.getRangeElem() : editor.getRangeElem().parentNode;
            // 判断当前表格是否有合并的单元格
            if (table.querySelectorAll('td[rowspan], td[colspan]').length === 0) return;
            // 创建合并单元格的按钮
            var mergeBtn = new E.Menu({
                editor: editor,
                title: '合并单元格',
                $domNormal: $('<a href="#" tabindex="-1"><i class="wangeditor-menu-img-table-merge"></i></a>'),
                $domSelected: $('<a href="#" tabindex="-1" class="selected"><i class="wangeditor-menu-img-table-merge"></i></a>')
            });
            mergeBtn.clickEventHandle = function (e, $obj) {
                // 获取当前选中的单元格
                var td = table.querySelector('td.selected');
                if (!td) return; // 未选中单元格
                // 获取当前选中单元格在表格中的位置
                var rowIdx = td.parentNode.rowIndex;
                var colIdx = td.cellIndex;
                // 获取当前选中单元格的行列合并数
                var rowspan = td.rowSpan;
                var colspan = td.colSpan;
                // 恢复其他单元格的显示
                table.querySelectorAll('td').forEach(function (td) {
                    td.style.display = '';
                });
                // 合并单元格
                for (var i = 0; i < rowspan; i++) {
                    for (var j = 0; j < colspan; j++) {
                        if (i === 0 && j === 0) continue;
                        table.rows[rowIdx + i].cells[colIdx + j].style.display = 'none';
                    }
                }
                // 取消选中状态
                td.classList.remove('selected');
                // 更新按钮状态
                mergeBtn.updateSelected();
            };
            // 添加合并单元格的按钮
            editor.menus[tableMerge.id] = mergeBtn;
        });
        // 点击单元格选中并高亮显示
        editor.txt.$txt.on('click', 'td', function () {
            var $td = $(this);
            var $table = $td.closest('table');
            if ($table.length === 0) return; // 不在表格内
            var table = $table[0];
            // 取消其他单元格的选中状态
            table.querySelectorAll('td').forEach(function (td) {
                td.classList.remove('selected');
            });
            // 选中当前单元格
            $td.addClass('selected');
            // 打开合并单元格的按钮
            if (table.querySelectorAll('td[rowspan], td[colspan]').length > 0) {
                editor.showMenu(mergeBtn);
            }
        });
    };
    tableMerge.id = 'tableMerge';
    tableMerge.title = '合并单元格';
    tableMerge.$elem = $('<div class="wangeditor-menu-img-table-merge"></div>');
    tableMerge.type = 'click';
    // 将自定义插件注册到wangeditor编辑器中
    window.wangEditor && window.wangEditor.registerMenu && window.wangEditor.registerMenu(tableMerge.id, tableMerge);
})();

3. 在wangeditor初始化的时候，将自定义插件tableMerge加入到菜单栏中。

// 初始化wangeditor，并添加自定义插件
var editor = new wangEditor('#editor');
editor.config.menus = [
    ...
    'tableMerge', // 将自定义插件添加到菜单栏中
    ...
];
editor.config.menuFixed = false;
editor.config.zIndex = 100;
editor.config.customConfig.showLinkImg = false;
editor.config.customConfig.uploadImgMaxLength = 5;
editor.config.customConfig.uploadImgServer = '/uploadImg';
editor.config.customConfig.uploadFileName = 'file';
editor.config.customConfig.uploadImgHooks = {
    fail: function (xhr, editor, result) {
        console.log('上传失败！请检查网络和文件大小限制！');
    }
};
editor.config.customConfig.uploadImgParams = {
    token: '123456'
};
editor.config.customConfig.onchange = function (html) {
    // 监控变化，同步更新到textarea
    textarea.val(html);
};
editor.create();

4. 在页面中引入wangeditor所需的样式文件和js文件。

<!-- 引入wangeditor的样式文件和js文件 -->
<link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/wangEditor/10.0.13/wangEditor.min.css">
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/wangEditor/10.0.13/wangEditor.min.js"></script>
<!-- 引入自定义插件 -->
<script type="text/javascript" src="./tableMerge.js"></script>

5. 这样就可以在wangeditor富文本编辑器中实现合并单元格的功能了。