TinyMce 5 setcontent не может правильно установить html - PullRequest
Новая
       78

TinyMce 5 setcontent не может правильно установить html

0 голосов
/ 04 марта 2020

Я пишу пользовательский плагин tinymce под названием Mergetable. которая объединит две выбранные пользователем таблицы.

Постановка задачи:

  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();}
          });

    });

    }());
}());

1 Ответ

0 голосов
/ 05 марта 2020

Я могу решить мою проблему, используя некоторые обходные пути. Вместо этого используйте метод 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();}
          });

    });

    }());
}());
...