TinyMce 5 setcontent 无法正确设置 html

Question

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

问题陈述：

TinyMce 不允许 select 两个 table ，通过使用 shift 和鼠标我可以 select table 的内容。所以我不能使用 tinmce.activeeditor.selection.getNode() 方法，而是使用 tinmce.activeeditor.selection.getContent()。
1. Form getcontent() 方法我得到了 html 两个 table 的正确方法。在使用 tinmce.activeeditor.selection.setContent() 设置内容时执行一些操作后，两个 table 都正确合并，但另外两个 table 与空 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();}
          });

    });

    }());
}());

TinyMce 5 setcontent 无法正确设置 html

TinyMce 5 setcontent unable to set html properly

javascript

wordpress

tinymce

tinymce-plugins

tinymce-5