From ed0c5a406b4ec2ba53b06ce6b7e3246d6d908d70 Mon Sep 17 00:00:00 2001 From: Van Date: Tue, 7 Jan 2020 10:44:24 +0800 Subject: [PATCH] =?UTF-8?q?:bug:=20=E5=88=97=E8=A1=A8=E6=9D=BE=E6=95=A3?= =?UTF-8?q?=E6=A8=A1=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/ts/toolbar/Record.ts | 2 +- src/ts/wysiwyg/addP2Li.ts | 23 +++++++++++++++++++++++ src/ts/wysiwyg/index.ts | 2 +- src/ts/wysiwyg/input.ts | 4 ++++ src/ts/wysiwyg/insertHTML.ts | 4 ++-- src/ts/wysiwyg/renderDomByMd.ts | 6 +----- 6 files changed, 32 insertions(+), 9 deletions(-) create mode 100644 src/ts/wysiwyg/addP2Li.ts diff --git a/src/ts/toolbar/Record.ts b/src/ts/toolbar/Record.ts index 4169e4708..a452259a8 100644 --- a/src/ts/toolbar/Record.ts +++ b/src/ts/toolbar/Record.ts @@ -17,7 +17,7 @@ export class Record extends MenuItem { let mediaRecorder: MediaRecorder; this.element.children[0].addEventListener(getEventName(), (event) => { event.preventDefault(); - const editorElement = vditor.currentMode === "wysiwyg" ? vditor.wysiwyg.element : vditor.editor.element + const editorElement = vditor.currentMode === "wysiwyg" ? vditor.wysiwyg.element : vditor.editor.element; if (!mediaRecorder) { navigator.mediaDevices.getUserMedia({audio: true}).then((mediaStream: MediaStream) => { mediaRecorder = new MediaRecorder(mediaStream); diff --git a/src/ts/wysiwyg/addP2Li.ts b/src/ts/wysiwyg/addP2Li.ts new file mode 100644 index 000000000..b771bef6b --- /dev/null +++ b/src/ts/wysiwyg/addP2Li.ts @@ -0,0 +1,23 @@ +export const addP2Li = (listElement: Element) => { + listElement.querySelectorAll("li").forEach((liElement: HTMLElement) => { + let tempNodes = []; + let node = liElement.firstChild as HTMLElement; + while (node) { + if (node.nodeType === 3) { + tempNodes.push(node); + } else if (node.tagName !== "UL" && node.tagName !== "OL" && + node.tagName !== "BLOCKQUOTE" && node.tagName !== "P") { + tempNodes.push(node); + } else if (tempNodes.length > 0) { + const pElement = document.createElement("p"); + tempNodes.forEach((nodeItem) => { + pElement.appendChild(nodeItem); + }); + node.insertAdjacentElement('beforebegin', pElement) + tempNodes = []; + } + + node = node.nextSibling as HTMLElement; + } + }); +}; diff --git a/src/ts/wysiwyg/index.ts b/src/ts/wysiwyg/index.ts index a07281661..8c6b7b492 100644 --- a/src/ts/wysiwyg/index.ts +++ b/src/ts/wysiwyg/index.ts @@ -101,7 +101,7 @@ class WYSIWYG { `${textPlain}` || textHTML.replace(/<(|\/)(html|body|meta)[^>]*?>/ig, "").trim() === `${textPlain}`) { - textHTML = ''; + textHTML = ""; } // process word diff --git a/src/ts/wysiwyg/input.ts b/src/ts/wysiwyg/input.ts index cdc93c836..7cde9b451 100644 --- a/src/ts/wysiwyg/input.ts +++ b/src/ts/wysiwyg/input.ts @@ -6,6 +6,7 @@ import { hasTopClosestByTag, } from "../util/hasClosest"; import {log} from "../util/log"; +import {addP2Li} from "./addP2Li"; import {afterRenderEvent} from "./afterRenderEvent"; import {processCodeRender} from "./processCodeRender"; import {setRangeByWbr} from "./setRangeByWbr"; @@ -21,6 +22,7 @@ export const input = (event: IHTMLInputEvent, vditor: IVditor, range: Range) => topListElement = topOlElement; } if (topListElement) { + addP2Li(topListElement); blockElement = topListElement; } if (!blockElement) { @@ -71,10 +73,12 @@ export const input = (event: IHTMLInputEvent, vditor: IVditor, range: Range) => const listPrevElement = listElement.previousElementSibling; const listNextElement = listElement.nextElementSibling; if (listPrevElement && (listPrevElement.tagName === "UL" || listPrevElement.tagName === "OL")) { + addP2Li(listPrevElement); vditorHTML = listPrevElement.outerHTML + vditorHTML; listPrevElement.remove(); } if (listNextElement && (listNextElement.tagName === "UL" || listNextElement.tagName === "OL")) { + addP2Li(listNextElement); vditorHTML = vditorHTML + listNextElement.outerHTML; listNextElement.remove(); } diff --git a/src/ts/wysiwyg/insertHTML.ts b/src/ts/wysiwyg/insertHTML.ts index 193862566..96df29c46 100644 --- a/src/ts/wysiwyg/insertHTML.ts +++ b/src/ts/wysiwyg/insertHTML.ts @@ -1,7 +1,7 @@ export const insertHTML = (html: string, vditor: IVditor) => { // 使用 lute 方法会添加 p 元素，只有一个 p 元素的时候进行删除 - const tempElement = document.createElement('div') - tempElement.innerHTML = html + const tempElement = document.createElement("div"); + tempElement.innerHTML = html; const pElements = tempElement.querySelectorAll("p"); if (pElements.length === 1) { html = pElements[0].innerHTML.trim(); diff --git a/src/ts/wysiwyg/renderDomByMd.ts b/src/ts/wysiwyg/renderDomByMd.ts index 6ffa057b9..5d939b1d3 100644 --- a/src/ts/wysiwyg/renderDomByMd.ts +++ b/src/ts/wysiwyg/renderDomByMd.ts @@ -1,6 +1,5 @@ import {enableToolbar} from "../toolbar/enableToolbar"; import {removeCurrentToolbar} from "../toolbar/removeCurrentToolbar"; -import {log} from "../util/log"; import {afterRenderEvent} from "./afterRenderEvent"; import {processCodeRender} from "./processCodeRender"; @@ -11,10 +10,7 @@ export const renderDomByMd = (vditor: IVditor, md: string) => { enableToolbar(vditor.toolbar.elements, allToolbar); const editorElement = vditor.wysiwyg.element; - const innerHTML = vditor.lute.Md2VditorDOM(md) || '

\n

'; - log("Md2VditorDOM", md, "arguments", vditor.options.debugger); - log("Md2VditorDOM", innerHTML, "result", vditor.options.debugger); - editorElement.innerHTML = innerHTML; + editorElement.innerHTML = vditor.lute.Md2VditorDOM(md) || '

\n

'; editorElement.querySelectorAll(".vditor-wysiwyg__block").forEach((blockElement: HTMLElement) => { processCodeRender(blockElement, vditor);