Tinymce editor get content of only 5 columns of a table

Question

var myTableArray = [];
var numberOfColumns = 5;
    
    $("#previewDiv").html(tinymce.activeEditor.getContent());
    //console.log(tinymce.activeEditor.getContent());
    $("#previewDiv").find("table tr").each(function(){
        var arrayOfThisRow = [];
        var tableData = $(this).find("td");
        if (tableData.length > 0) {
            if(tableData.length < 5){
                numberOfColumns = tableData.length;
                
            }
            for (var i=0; i< numberOfColumns; i++){
                arrayOfThisRow.push(tableData[i].innerHTML);
            }
            if(tableData.length < 5){
                for(var j = numberOfColumns; j<5; j++){
                    arrayOfThisRow.push("");
                }
            }
            myTableArray.push(arrayOfThisRow);

            /*if(tableData.length < 5){
                numberOfColumns = tableData.length;
            }
            for(var i=0; i< numberOfColumns; i++){
                
                arrayOfThisRow.push(tableData[i].$(this).text());
            }
            if(arrayOfThisRow.length < 5){
                for(i= numberOfColumns; i< 5; i++){
                    arrayOfThisRow.push("");
                }

            }
            //console.log(arrayOfThisRow);
            myTableArray.push(arrayOfThisRow);*/
        }

    });

Q. I am getting an html table of variable column numbers and I want to parse only 5 columns out of it

Background info: I have set a default content in the text area of tinymce editor. This default content is a table with 5 columns and no restriction on the number of rows.

I parse the content in this editor text area to a bootstrap modal pop-up, which displays exactly the same content as in text area of tinymce editor.

Whenever, a user copies more than 5 columns of table content and paste it in the textarea of tinymce editor, the parsing breaks and the excess of 5 column values are returned as "undefined" in the modal pop-up.

How do I restrict the getcontent() method of tinymce to only parse 5 table columns of the table and disregard the other columns if the user pastes more than 5 table columns.

Also, please let me know if there is a way I can share my code, which will help you understand better. Please see the attached images tinymce editor pic modal pop-up pic

Michael Fromin Michael Fromin · Accepted Answer · 2018-10-17T14:17:15

The API getContent() does exactly what it says it will do - its gets the entire contents of the editor. If you need a subset of that content you would need to parse out what you need.

If you don't want people adding more columns why not use contenteditable to stop people from adding more columns to your table?

Tinymce editor get content of only 5 columns of a table

1 Answers