Javascript TinyMce 5 setcontent无法正确设置html

我正在编写一个名为Mergetable的tinymce自定义插件。这将合并两个用户选择的表

问题陈述：

TinyMce不允许选择两个表，通过使用shift和鼠标我可以选择表的内容。因此，我不能使用tinmce.activeeditor.selection.getNode（）方法，而是使用tinmce.activeeditor.selection.getContent（）。

Form getcontent（）方法我得到两个表的正确html。在使用tinmce.activeeditor.selection.setContent（）设置内容时执行一些操作后，两个表正确合并，但又创建了两个空td的表，一个在顶部，一个在底部。请参阅下面的插件代码

代码：

(function () {
    var mergeTable = (function () {
    'use strict';
    tinymce.PluginManager.add("mergeTable", function (editor, url) {
        function Merge(){

            var selectedhtml=editor.selection.getContent();
        //using getContent() as getnode returning body node
            var dv=document.createElement('div'); 
            dv.innerHTML= selectedhtml;   
            var tableElements = dv.getElementsByTagName('TABLE');

            if (tableElements.length == 2) {

                var tableOne = tableElements[0];
                var tableTwo = tableElements[1];
                var tempTable = null;
                var offsetLeft = tableOne.offsetLeft;
                var offsetTop = tableOne.offsetTop;
                var elem = tableElements[0];


                if (tableOne.nodeName == "TABLE" && tableTwo.nodeName == "TABLE") {
                    for (var r = 0; r < tableTwo.rows.length; r++) {
                        var newTR = tableOne.insertRow(tableOne.rows.length);
                        for (var i = 0; i < tableTwo.rows[r].cells.length; i++) {
                            var newTD = newTR.insertCell()
                            newTD.innerHTML = tableTwo.rows[r].cells[i].innerHTML;
                            newTD.colSpan = tableTwo.rows[r].cells[i].colSpan;
                            newTD.rowSpan = tableTwo.rows[r].cells[i].rowSpan;
                            newTD.style.cssText = tableTwo.rows[r].cells[i].style.cssText;
                            if (tableOne.style.border != "") {
                                newTD.style.border = "1px dotted #BFBFBF"
                            }
                        }
                    }

                    tableTwo.remove();
                    console.log(dv.innerHTML);

                    editor.selection.setContent(dv.innerHTML);
                    editor.nodeChanged();
                }
                else {
                    alert("Please select two tables");
                }

            }




        }

        editor.ui.registry.addButton('mergeTable', {
            text: "Merge Table",
            onAction: function(){ Merge();}
          });

    });

    }());
}());

（函数（）{
var mergeTable=（函数（）{
"严格使用",；
添加（“合并表”，函数（编辑器，url）{
函数Merge（）{
var selectedhtml=editor.selection.getContent（）；
//使用getContent（）作为getnode返回正文节点
var dv=document.createElement（'div'）；
dv.innerHTML=selectedhtml；
var tableElements=dv.getElementsByTagName（'TABLE'）；
如果（tableElements.length==2）{
var tableOne=tableElements[0]；
var tableTwo=tableElements[1]；
var-tentable=null；
var offsetLeft=tableOne.offsetLeft；
var offsetTop=表1.offsetTop；
var elem=tableElements[0]；
if（tableOne.nodeName==“TABLE”&&tableTwo.nodeName==“TABLE”）{
对于（var r=0；r

我可以通过使用一些变通方法来解决我的问题。而是使用setContent（）方法。我已删除所选内容并使用insertContent（）。 请在下面找到工作代码

(function () {
    var mergeTable = (function () {
    'use strict';
    tinymce.PluginManager.add("mergeTable", function (editor, url) {
        var cmd = function (command) {
            return function () {
              return editor.execCommand(command);
            };
          };
        function Merge(){

            var selectedhtml=editor.selection.getContent();
            var dv=document.createElement('div'); 
            dv.innerHTML= selectedhtml;   
            var tableElements = dv.getElementsByTagName('TABLE');

            if (tableElements.length == 2) {

                var tableOne = tableElements[0];
                var tableTwo = tableElements[1];
                var tempTable = null;                
                var tableOneMaxCell=0
                var tabletwoMaxCell=0
                var tempCellcount=0
                 var tableOneRowcount=tableOne.rows.length;
                tableOne.querySelectorAll("tr").forEach(function(e){
                    tempCellcount= e.querySelectorAll("td").length ;
                    if(tempCellcount>tableOneMaxCell)
                    {
                        tableOneMaxCell=tempCellcount;
                    }
                   });
                   tableTwo.querySelectorAll("tr").forEach(function(e){
                    tempCellcount= e.querySelectorAll("td").length ;
                    if(tempCellcount>tabletwoMaxCell)
                    {
                        tabletwoMaxCell=tempCellcount;
                    }
                   });


                if (tableOne.nodeName == "TABLE" && tableTwo.nodeName == "TABLE") {
                    for (var r = 0; r < tableTwo.rows.length; r++) {
                        var newTR = tableOne.insertRow(tableOne.rows.length);
                        for (var i = 0; i < tableTwo.rows[r].cells.length; i++) {
                            var newTD = newTR.insertCell()
                            newTD.innerHTML = tableTwo.rows[r].cells[i].innerHTML;
                            newTD.colSpan = tableTwo.rows[r].cells[i].colSpan;
                            newTD.rowSpan = tableTwo.rows[r].cells[i].rowSpan;
                            newTD.style.cssText = tableTwo.rows[r].cells[i].style.cssText;
                            if (tableOne.style.border != "") {
                                newTD.style.border = "1px dotted #BFBFBF"
                            }
                            if(i==tableTwo.rows[r].cells.length-1 && tableOneMaxCell>tabletwoMaxCell){
                                newTD.colSpan = tableTwo.rows[r].cells[i].colSpan + (tableOneMaxCell-tabletwoMaxCell);
                            }
                        }
                    }
                    for( var t1=0; t1<tableOneRowcount; t1++ ){
                        var celllen=tableOne.rows[t1].cells.length;
                        tableOne.rows[t1].cells[celllen-1].colSpan=tableOne.rows[t1].cells[celllen-1].colSpan+(tabletwoMaxCell-tableOneMaxCell)

                    }
                    tableTwo.remove();

                    // cmd('mceTableDelete');

                    // var selObj = editor.selection;                     
                    // var selstartRange = selObj.getStart();
                    // var selectendRange= selObj.getEnd();
                    // var selrng=selObj.getRng();
                    // console.log(selstartRange);
                    // console.log(selectendRange);
                    // editor.execCommand('mceTableDelete');
                    // selObj.removeAllRanges();
                    editor.selection.getSelectedBlocks().forEach(function(elm){     
                        elm.remove();
                    });  


                        // selObj.setRng(selrng,true);
                        editor.insertContent(dv.innerHTML);
                        editor.nodeChanged();

                }
                else {
                    editor.notificationManager.open({
                        text: 'Please select two table.',
                        type: 'error'
                     });
                }
            }
            else {
                editor.notificationManager.open({
                    text: 'Please select two table.',
                    type: 'error'
                 });
            }

        }

        editor.ui.registry.addButton('mergeTable', {
            text: "MergeTable",
            onAction: function(){ Merge();}
          });

    });

    }());
}());

（函数（）{
var mergeTable=（函数（）{
"严格使用",；
添加（“合并表”，函数（编辑器，url）{
var cmd=函数（命令）{
返回函数（）{
返回editor.execCommand（command）；
};
};
函数Merge（）{
var selectedhtml=editor.selection.getContent（）；
var dv=document.createElement（'div'）；
dv.innerHTML=selectedhtml；
var tableElements=dv.getElementsByTagName（'TABLE'）；
如果（tableElements.length==2）{
var tableOne=tableElements[0]；
var tableTwo=tableElements[1]；
var-tentable=null；
var tableOneMaxCell=0
var tabletowaxcell=0
var tempCellcount=0
var tableOneRowcount=tableOne.rows.length；
表1.querySelectorAll（“tr”）.forEach（函数（e）{
tempCellcount=e.querySelectorAll（“td”）.长度；
如果（tempCellcount>tableOneMaxCell）
{
tableOneMaxCell=tempCellcount；
}
});
表2.querySelectorAll（“tr”）.forEach（函数（e）{
tempCellcount=e.querySelectorAll（“td”）.长度；
如果（tempCellcount>tabletwoMaxCell）
{
tabletwoMaxCell=tempCellcount；
}
});
if（tableOne.nodeName==“TABLE”&&tableTwo.nodeName==“TABLE”）{
对于（var r=0；rtabletwoMaxCell）{
newTD.colSpan=tableTwo.rows[r].cells[i].colSpan+（tableOneMaxCell tabletwoMaxCell）；
}
}
}
对于（var t1=0；t1