From d06f0613fab30767f3507a98b51d6dc2d527d34c Mon Sep 17 00:00:00 2001 From: kooky126 Date: Tue, 2 Nov 2021 12:40:32 +0800 Subject: [PATCH 1/3] Update plugin.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit add ability of paste from word table or html table colspan cell will holder by "<" rowspancell will holder by "^" editor.js cut all table node data in paste（such as tr td ） editor.js\src\components\modules\paste.ts need add a line in 555 555 content.innerHTML = clean(content.innerHTML, customConfig); to 555 if(!(//i.test(content.innerHTML))) 556 content.innerHTML = clean(content.innerHTML, customConfig); --- src/plugin.js | 108 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 108 insertions(+) diff --git a/src/plugin.js b/src/plugin.js index 125b76c..149418d 100644 --- a/src/plugin.js +++ b/src/plugin.js @@ -151,6 +151,114 @@ export default class TableBlock { return wrapper; } + + /** + * Table Tool on paste configuration + * + * @public + */ + static get pasteConfig() { + return { + tags: ["table", "tr", "td", "th"] + }; + } + + /** + * On paste callback that is fired from Editor + * ready for word table or html table + * + * @param {PasteEvent} event - event with pasted data + */ + onPaste(event) { + if (event.tag = "table") { + //get table body + let tbody = event.detail.data.outerHTML; + //get trs + const trregexp = /]*?>(.*?)<\/tr>/gism; + let tr = [...tbody.matchAll(trregexp)]; + //if first item is th,set withHeadings true + if (tr.length > 0 && /]*?>.*?<\/th>/gism.test(tr[0])) + this.data.withHeadings = true; + //ups is rowspan place holder + let ups = []; + //each tr line + for (let i = 0; i < tr.length; i++) { + let trmatch = tr[i]; + let subdata = []; + //get tds + const tdregexp = /<(t[hd])([^>]*?)>(.*?)<\/\1>/gism; + let td = [...trmatch[1].matchAll(tdregexp)]; + for (let j = 0; j < td.length; j++) { + let tdmatch = td[j]; + //get colspan,rowspan of td + let colspan = 0; + let rowspan = 0; + let colmatch = tdmatch[2].match(/colspan[^\d]*(\d+)/i); + if (colmatch) + colspan = parseInt(colmatch[1]); + let rowmatch = tdmatch[2].match(/rowspan[^\d]*(\d+)/i); + if (rowmatch) + rowspan = parseInt(rowmatch[1]); + subdata.push((tdmatch[3]).trim()); + //cursor of col + let offset = 0; + ups.forEach(function (up) { + if (up[0] == i && up[1] <= j) { + offset++; + } + }); + //mark rowspan place holder + while (rowspan > 1) { + ups.push([i + rowspan - 1, j + offset]); + let tmpcol = colspan; + while (tmpcol > 1) { + ups.push([i + rowspan - 1, j + offset + tmpcol - 1]); + tmpcol--; + } + rowspan--; + } + //push "<" to colspan place + while (colspan > 1) { + subdata.push("<"); + colspan--; + } + } + //push "^" to each rowspan place + ups.forEach(function (up) { + if (up[0] == i) { + subdata.splice(up[1], 0, "^"); + } + }); + this.data.content.push(subdata); + } + //some data need standardization, such as "half select tabe" from html + //get max col of content data + let maxcol = 0; + this.data.content.forEach(function (row) { + console.log(row); + if (row.length > maxcol) + maxcol = row.length; + }); + //add missing data,first line to left,other line to right + for(let k=0;k Date: Tue, 2 Nov 2021 12:53:45 +0800 Subject: [PATCH 2/3] Update plugin.js del console.log --- src/plugin.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/plugin.js b/src/plugin.js index 149418d..225dbdd 100644 --- a/src/plugin.js +++ b/src/plugin.js @@ -235,7 +235,6 @@ export default class TableBlock { //get max col of content data let maxcol = 0; this.data.content.forEach(function (row) { - console.log(row); if (row.length > maxcol) maxcol = row.length; }); From 2e8025e2a899aa6335bbc1aa03c7f6682c090d88 Mon Sep 17 00:00:00 2001 From: kooky126 Date: Tue, 2 Nov 2021 13:39:13 +0800 Subject: [PATCH 3/3] modify readme add ability of paste from word or html table --- README.md | 97 ++++++------------------------------------------------- 1 file changed, 10 insertions(+), 87 deletions(-) diff --git a/README.md b/README.md index aa94d5c..6b81ab2 100644 --- a/README.md +++ b/README.md @@ -1,91 +1,14 @@ -# Table tool +# Table tool with paste ability -The Table Block for the [Editor.js](https://editorjs.io). Finally improved. +Fork From https://github.com/editor-js/table -![](https://capella.pics/41294cec-a2b3-4157-8399-ffefed3d8ffd.jpg) +paste in editor.js will lost tr/td data of table node，so need modify -## Installation +editor.js\src\components\modules\paste.ts -Get the package - -```shell -npm i --save @editorjs/table -``` -or - -```shell -yarn add @editorjs/table -``` - -## Usage - -Add a new Tool to the `tools` property of the Editor.js initial config. - -```javascript -import Table from '@editorjs/table'; - -var editor = EditorJS({ - tools: { - table: Table, - } -}); -``` - -Or init the Table tool with additional settings - -```javascript -var editor = EditorJS({ - tools: { - table: { - class: Table, - inlineToolbar: true, - config: { - rows: 2, - cols: 3, - }, - }, - }, -}); -``` - -## Config Params - -| Field | Type | Description | -| ------------------ | -------- | ---------------------------------------- | -| `rows` | `number` | initial number of rows. `2` by default | -| `cols` | `number` | initial number of columns. `2` by default | - -## Output data - -This Tool returns `data` in the following format - -| Field | Type | Description | -| -------------- | ------------ | ----------------------------------------- | -| `withHeadings` | `boolean` | Uses the first line as headings | -| `content` | `string[][]` | two-dimensional array with table contents | - -```json -{ - "type" : "table", - "data" : { - "withHeadings": true, - "content" : [ [ "Kine", "Pigs", "Chicken" ], [ "1 pcs", "3 pcs", "12 pcs" ], [ "100$", "200$", "150$" ] ] - } -} -``` - -# Support maintenance 🎖 - -If you're using this tool and editor.js in your business, please consider supporting their maintenance and evolution. - -[http://opencollective.com/editorjs](http://opencollective.com/editorjs) - -# About CodeX - - - -CodeX is a team of digital specialists around the world interested in building high-quality open source products on a global market. We are [open](https://codex.so/join) for young people who want to constantly improve their skills and grow professionally with experiments in leading technologies. - -| 🌐 | Join 👋 | Twitter | Instagram | -| -- | -- | -- | -- | -| [codex.so](https://codex.so) | [codex.so/join](https://codex.so/join) |[@codex_team](http://twitter.com/codex_team) | [@codex_team](http://instagram.com/codex_team) | +555 content.innerHTML = clean(content.innerHTML, customConfig); + to +555 if(!(//i.test(content.innerHTML))) +556 content.innerHTML = clean(content.innerHTML, customConfig); + +