🐛 fix #456

Vanessa219 · May 28, 2020 · 688c4d0 · 688c4d0
1 parent e975d1a
commit 688c4d0
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 20 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -66,6 +66,8 @@
 
 ### v3.2.11 / 2020-05-xx
 
+* [456](https://github.com/Vanessa219/vditor/pull/456) 根据逗号/制表符生成表格 `引入特性`
+
 ### v3.2.10 / 2020-05-27
 
 * [453](https://github.com/Vanessa219/vditor/issues/453) bold 位于子菜单中无作用 `修复缺陷`

diff --git a/src/ts/wysiwyg/toolbarEvent.ts b/src/ts/wysiwyg/toolbarEvent.ts
@@ -228,44 +228,47 @@ export const toolbarEvent = (vditor: IVditor, actionBtn: Element) => {
                 setSelectionFocus(range);
             }
         } else if (commandName === "table") {
-            if (blockElement && blockElement.innerHTML.trim().replace(Constants.ZWSP, "") === "") {
-                const tableHTML = `<table data-block="0"><thead><tr><th>col1<wbr></th><th>col2</th><th>col3</th></tr></thead><tbody><tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr></tbody></table>`;
-                console.log("outerHTML");
-                blockElement.outerHTML = tableHTML;
+            let tableHTML = `<table data-block="0"><thead><tr><th>col1<wbr></th><th>col2</th><th>col3</th></tr></thead><tbody><tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr></tbody></table>`
+            if (range.toString().trim() === "") {
+                if (blockElement && blockElement.innerHTML.trim().replace(Constants.ZWSP, "") === "") {
+                    blockElement.outerHTML = tableHTML;
+                } else {
+                    document.execCommand("insertHTML", false, tableHTML);
+                }
+                range.selectNode(vditor.wysiwyg.element.querySelector("wbr").previousSibling);
+                vditor.wysiwyg.element.querySelector("wbr").remove();
+                setSelectionFocus(range);
             } else {
-                let tableHTML = `<table data-block="0"><thead><tr>`;
-
-                const tableText = range.toString().split("\n")
+                tableHTML = `<table data-block="0"><thead><tr>`;
+                const tableText = range.toString().split("\n");
+                const delimiter = tableText[0].split(",").length > tableText[0].split("\t").length ? "," : "\t";
 
                 tableText.forEach((rows, index) => {
                     if (index === 0) {
-                        rows.split(",").forEach((header, index) => {
-                            if(index === 0) {
+                        rows.split(delimiter).forEach((header, subIndex) => {
+                            if (subIndex === 0) {
                                 tableHTML += `<th>${header}<wbr></th>`;
                             } else {
                                 tableHTML += `<th>${header}</th>`;
                             }
-                        }) 
-                        tableHTML += `</tr></thead>`;
+                        });
+                        tableHTML += "</tr></thead>";
                     } else {
                         if (index === 1) {
-                            tableHTML += `<tbody><tr>`;
+                            tableHTML += "<tbody><tr>";
                         } else {
-                            tableHTML += `<tr>`;
+                            tableHTML += "<tr>";
                         }
-                        rows.split(",").forEach(cell => {
+                        rows.split(delimiter).forEach((cell) => {
                             tableHTML += `<td>${cell}</td>`;
-                        })
+                        });
                         tableHTML += `</tr>`;
-                        console.log(index, tableHTML);
                     }
                 });
-                tableHTML += `</tbody></table>`;
+                tableHTML += "</tbody></table>";
                 document.execCommand("insertHTML", false, tableHTML);
+                setRangeByWbr(vditor.wysiwyg.element, range);
             }
-            range.selectNode(vditor.wysiwyg.element.querySelector("wbr").previousSibling);
-            vditor.wysiwyg.element.querySelector("wbr").remove();
-            setSelectionFocus(range);
         } else if (commandName === "line") {
             if (blockElement) {
                 const hrHTML = '<hr data-block="0"><p data-block="0"><wbr>\n</p>';