javascript - TinyMce 5 setcontent 无法正确设置 html

Question

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

问题陈述：

1. TinyMce 不允许选择两个表格，通过使用 shift 和鼠标我可以选择表格的内容。所以我不能使用 tinmce.activeeditor.selection.getNode() 方法而不是使用 tinmce.activeeditor.selection.getContent()。
   2. 表单 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();}
          });

    });

    }());
}());

Answer 1

我可以通过使用一些解决方法来解决我的问题。而是使用 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();}
          });

    });

    }());
}());