时间戳

首页 > 解决方案 > Tinymce 编辑器仅获取表格 5 列的内容

tinymce - Tinymce 编辑器仅获取表格 5 列的内容

问题描述

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);*/
        }

    });

问：我得到一个可变列号的 html 表，我只想解析其中的 5 列

背景信息： 我在 tinymce 编辑器的文本区域设置了默认内容。此默认内容是一个有 5 列且对行数没有限制的表格。

我将此编辑器文本区域中的内容解析为引导模式弹出窗口，它显示的内容与 tinymce 编辑器的文本区域中的内容完全相同。

每当用户复制超过 5 列的表格内容并将其粘贴到 tinymce 编辑器的 textarea 中时，解析中断和超过 5 列的值将在模式弹出窗口中返回为“未定义”。

如何将 tinymce 的 getcontent() 方法限制为仅解析表的 5 个表列，如果用户粘贴超过 5 个表列，则忽略其他列。

另外，如果有办法可以分享我的代码，请告诉我，这将帮助您更好地理解。请查看附件图片 tinymce 编辑器图片 模态弹出图片

标签： tinymcebootstrap-modalqtinymce-plugins

解决方案

APIgetContent()完全按照它所说的去做——它获取编辑器的全部内容。如果您需要该内容的子集，则需要解析出您需要的内容。

如果您不希望人们添加更多列，为什么不使用contenteditable阻止人们向您的表中添加更多列呢？

推荐阅读