diff --git a/CHANGELOG.md b/CHANGELOG.md index c3dc88cba..8ecc4d424 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -48,6 +48,7 @@ ### v2.2.2 / 2020-02-19 +* [155](https://github.com/Vanessa219/vditor/issues/155) blockquote 插入光标错误 `修复缺陷` * [154](https://github.com/Vanessa219/vditor/issues/154) the cursor is disapeared after tab pressed at editor mode `修复缺陷` * [153](https://github.com/Vanessa219/vditor/issues/153) Heading toolbar is not working `修复缺陷` * [148](https://github.com/Vanessa219/vditor/issues/148) 任务列表退格删除问题 `修复缺陷` diff --git a/src/ts/wysiwyg/highlightToolbar.ts b/src/ts/wysiwyg/highlightToolbar.ts index e9b5078a3..6c1bc5097 100644 --- a/src/ts/wysiwyg/highlightToolbar.ts +++ b/src/ts/wysiwyg/highlightToolbar.ts @@ -42,6 +42,9 @@ export const highlightToolbar = (vditor: IVditor) => { if (range.startContainer.nodeType === 3) { typeElement = range.startContainer.parentElement; } + if (typeElement.classList.contains("vditor-wysiwyg")) { + typeElement = typeElement.childNodes[range.startOffset] as HTMLElement; + } // 工具栏高亮和禁用 const liElement = hasClosestByMatchTag(typeElement, "LI"); diff --git a/src/ts/wysiwyg/toolbarEvent.ts b/src/ts/wysiwyg/toolbarEvent.ts index 46888e22e..1985e6bd9 100644 --- a/src/ts/wysiwyg/toolbarEvent.ts +++ b/src/ts/wysiwyg/toolbarEvent.ts @@ -1,7 +1,7 @@ import {Constants} from "../constants"; import {setSelectionFocus} from "../editor/setSelection"; import {setCurrentToolbar} from "../toolbar/setCurrentToolbar"; -import {hasClosestByAttribute, hasClosestByMatchTag} from "../util/hasClosest"; +import {hasClosestBlock, hasClosestByAttribute, hasClosestByMatchTag} from "../util/hasClosest"; import {afterRenderEvent} from "./afterRenderEvent"; import {genAPopover, highlightToolbar} from "./highlightToolbar"; import {getNextHTML, getPreviousHTML} from "./inlineTag"; @@ -155,13 +155,18 @@ export const toolbarEvent = (vditor: IVditor, actionBtn: Element) => { } if (commandName === "quote") { - const quoteElement = hasClosestByMatchTag(range.startContainer, "BLOCKQUOTE"); + let quoteElement: HTMLElement | boolean + if (range.startContainer.nodeType !== 3 && + (range.startContainer as HTMLElement).classList.contains("vditor-wysiwyg")) { + quoteElement = range.startContainer.childNodes[range.startOffset] as HTMLElement; + } else { + quoteElement = hasClosestByMatchTag(range.startContainer, "BLOCKQUOTE"); + } if (quoteElement) { - const tempElement = document.createElement("div"); - tempElement.innerHTML = quoteElement.innerHTML; - quoteElement.parentNode.replaceChild(tempElement, quoteElement); + range.insertNode(document.createElement("wbr")); + quoteElement.outerHTML = `

${quoteElement.innerHTML}

` + setRangeByWbr(vditor.wysiwyg.element, range); } - vditor.wysiwyg.element.focus(); } else if (commandName === "inline-code") { if (!range.collapsed) { document.execCommand("removeFormat", false, ""); @@ -204,8 +209,18 @@ export const toolbarEvent = (vditor: IVditor, actionBtn: Element) => { } if (commandName === "quote") { - document.execCommand("formatBlock", false, "BLOCKQUOTE"); - getSelection().getRangeAt(0).startContainer.parentElement.setAttribute("data-block", "0"); + let blockElement: HTMLElement | boolean + if (range.startContainer.nodeType !== 3 && + (range.startContainer as HTMLElement).classList.contains("vditor-wysiwyg")) { + blockElement = range.startContainer.childNodes[range.startOffset] as HTMLElement; + } else { + blockElement = hasClosestBlock(range.startContainer); + } + if (blockElement) { + range.insertNode(document.createElement("wbr")); + blockElement.outerHTML = `
${blockElement.innerHTML}
`; + setRangeByWbr(vditor.wysiwyg.element, range); + } } else if (commandName === "check" || commandName === "list" || commandName === "ordered-list") { listToggle(vditor, range, commandName, false); useHighlight = false;