diff --git a/src/editor/core/cursor/CursorAgent.ts b/src/editor/core/cursor/CursorAgent.ts index 55e1a62..2cfb88f 100644 --- a/src/editor/core/cursor/CursorAgent.ts +++ b/src/editor/core/cursor/CursorAgent.ts @@ -66,7 +66,9 @@ export class CursorAgent { } if (item.type === 'text/html' && isHTML) { item.getAsString(htmlText => { - const elementList = getElementListByHTML(htmlText) + const elementList = getElementListByHTML(htmlText, { + innerWidth: this.draw.getOriginalInnerWidth() + }) this.draw.insertElementList(elementList) }) } diff --git a/src/editor/utils/clipboard.ts b/src/editor/utils/clipboard.ts index 9efc06f..e4e7146 100644 --- a/src/editor/utils/clipboard.ts +++ b/src/editor/utils/clipboard.ts @@ -4,6 +4,8 @@ import { TEXTLIKE_ELEMENT_TYPE } from '../dataset/constant/Element' import { ControlComponent } from '../dataset/enum/Control' import { ElementType } from '../dataset/enum/Element' import { DeepRequired } from '../interface/Common' +import { ITd } from '../interface/table/Td' +import { ITr } from '../interface/table/Tr' import { zipElementList } from './element' export function writeClipboardItem(text: string, html: string) { @@ -130,7 +132,11 @@ export function writeElementList(elementList: IElement[], options: DeepRequired< writeClipboardItem(text, html) } -export function getElementListByHTML(htmlText: string): IElement[] { +interface IGetElementListByHTMLOption { + innerWidth: number; +} + +export function getElementListByHTML(htmlText: string, options: IGetElementListByHTMLOption): IElement[] { const elementList: IElement[] = [] function findTextNode(dom: Element | Node) { if (dom.nodeType === 3) { @@ -182,6 +188,51 @@ export function getElementListByHTML(htmlText: string): IElement[] { type: ElementType.IMAGE }) } + } else if (node.nodeName === 'TABLE') { + const tableElement = node as HTMLTableElement + const element: IElement = { + type: ElementType.TABLE, + value: '\n', + colgroup: [], + trList: [] + } + let tdCount = 0 + // 基础数据 + tableElement.querySelectorAll('tr').forEach((trElement, trIndex) => { + const trHeightStr = window.getComputedStyle(trElement).height.replace('px', '') + const tr: ITr = { + height: Number(trHeightStr), + tdList: [] + } + trElement.querySelectorAll('td').forEach(tdElement => { + const colspan = tdElement.colSpan + const rowspan = tdElement.rowSpan + if (trIndex === 0) { + tdCount += colspan + } + const td: ITd = { + colspan, + rowspan, + value: [{ + value: tdElement.innerText + }] + } + tr.tdList.push(td) + }) + element.trList!.push(tr) + }) + // 列选项数据 + if (tdCount) { + const width = Math.ceil(options.innerWidth / tdCount) + for (let i = 0; i < tdCount; i++) { + element.colgroup!.push({ + width + }) + } + } + if (element.colgroup) { + elementList.push(element) + } } else if (node.nodeName === 'INPUT' && (node).type === ControlComponent.CHECKBOX) { elementList.push({ type: ElementType.CHECKBOX,