wangeditor テーブルの問題と適応ソリューションの概要

1. エディターのコンテンツをエクスポートします。表には枠線スタイルがありません。 

1. letarticle = this.editor.getHtml(); // editor.getHtml(); を通じて HTML コンテンツを取得します。

2. テキスト文字列の処理：（CSS スタイルをテーブルに手動で追加）;

article = article.replace(/<table style="/g,'<table style="border-collapse:collapse;');  // 去除单元格边框间距

article = article.replace(/<table /g,'<table border="1" ');  // 添加边框

3. 最終的に処理された記事をサーバーにアップロードします。

2. 行・列の追加・削除は禁止です。

1. インポートされたテーブルにはデフォルトで列/行の挿入や削除などの機能がありますが、使用したくない場合はCSSスタイルで非表示にすることができます

 表示したくない要素を右クリックして確認し、その要素の唯一の属性を見つけます。「insert」が data-menu-key="insertTableRow" の場合は、ボタンの属性に display:none を設定します。それを隠すことができます。

// 隐藏图片"编辑"、表格“新增、删除行列”按钮
    button[data-menu-key="editImage"], 
    button[data-menu-key="tableFullWidth"],
    button[data-menu-key="insertTableRow"],
    button[data-menu-key="deleteTableRow"],
    button[data-menu-key="insertTableCol"],
    button[data-menu-key="deleteTableCol"],
    button[data-menu-key="tableHeader"]{
        display: none;
    }

 3. 入力コンテンツが長すぎてリストを展開できないため、画面オーバーの問題が発生する

1. エディターのスタイルを設計します。max-width は有効になるように設定する必要があります (具体的な理由は不明ですが、ガイドとして歓迎します)。コンテンツは改行を超えています。 word-break:break-word;

td{
   max-width: 50px !important;
   word-break: break-word;
}

2. エクスポートされたエディターのコンテンツの処理:

        テーブルの列数に応じて、各 td の最大幅を (100 / 列数)% に設定します。つまり、均等に分散します。

let article = this.editor.getHtml();
article = this.tableBorderDel(article);

// 处理表格内容超屏
        tableBorderDel(str){      
            let tableReg = /<table.*?<\/table>/g;  // 匹配<table></table>对
            let styleReg = /width=".*?"/g;   // 匹配所有的width，设为auto
            let trReg = /<tr.*?<\/tr>/;   // 匹配tr
            let tdReg = /<td.*?<\/td>/g;   // 匹配所有td

            let tableList = str.match(tableReg);
            if ( tableList != null ) {
                tableList.map(tableItem =>{
                    let newTable = tableItem.replace(styleReg, 'width="auto"');
                    str = str.replace(tableItem, newTable);
                })

                // 计算出最大宽度（根据列数，平均分配）
                let firstTr = tableList[0].match(trReg)[0];
                let tdNum = firstTr.match(tdReg).length;
                str = str.replace(/<td /g,`<td style="max-width:${100 / tdNum}% !important;word-break:break-word; "`);  // td 最大宽度、超出换行
            }

            return str;
        },