🐛 fix #104

Vanessa219 · Feb 7, 2020 · f28b381 · f28b381
1 parent 678b095
commit f28b381
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -46,6 +46,7 @@
 * [111](https://github.com/Vanessa219/vditor/issues/111) ctrl+b, ctrl+i, ctrl+s not working at starting and combining `修复缺陷`
 * [108](https://github.com/Vanessa219/vditor/issues/108) 行级代码问题 `修复缺陷`
 * [107](https://github.com/Vanessa219/vditor/issues/107) 删除线解析问题 `修复缺陷`
+* [104](https://github.com/Vanessa219/vditor/issues/104) image tag at wysiwyg mode `修复缺陷`
 * [103](https://github.com/Vanessa219/vditor/issues/103) cell alignment `修复缺陷`
 * [102](https://github.com/Vanessa219/vditor/issues/102) minus number at table(not important) `修复缺陷`
 * [101](https://github.com/Vanessa219/vditor/issues/101) 提供 setTheme(theme: "dark" | "classic") 方法 `改进功能`

diff --git a/src/ts/wysiwyg/highlightToolbar.ts b/src/ts/wysiwyg/highlightToolbar.ts
@@ -23,6 +23,7 @@ import {addP2Li} from "./addP2Li";
 import {afterRenderEvent} from "./afterRenderEvent";
 import {processCodeRender} from "./processCodeRender";
 import {setRangeByWbr} from "./setRangeByWbr";
+import {nextIsImg} from "./inlineTag";
 
 export const highlightToolbar = (vditor: IVditor) => {
     clearTimeout(vditor.wysiwyg.hlToolbarTimeoutId);
@@ -382,15 +383,13 @@ export const highlightToolbar = (vditor: IVditor) => {
         }
 
         // img popover
-        let imgElement: HTMLImageElement;
+        let imgElement = nextIsImg(range) as HTMLElement;
         if ((range.startContainer.nodeType !== 3 && range.startContainer.childNodes.length > range.startOffset &&
-            range.startContainer.childNodes[range.startOffset].nodeName === "IMG") ||
-            (range.startContainer.nodeType === 3 && range.startContainer.textContent.length === range.startOffset &&
-                range.startContainer.nextSibling && range.startContainer.nextSibling.nodeType !== 3 &&
-                (range.startContainer as HTMLElement).nextElementSibling.tagName === "IMG")) {
+            range.startContainer.childNodes[range.startOffset].nodeName === "IMG") || imgElement) {
             // 光标在图片前面，或在文字后面
-            imgElement = range.startContainer.childNodes[range.startOffset] as HTMLImageElement ||
-                range.startContainer.nextSibling as HTMLImageElement;
+            if (!imgElement) {
+                imgElement = range.startContainer.childNodes[range.startOffset] as HTMLElement;
+            }
             vditor.wysiwyg.popover.innerHTML = "";
             const updateImg = () => {
                 imgElement.setAttribute("src", input.value);

diff --git a/src/ts/wysiwyg/index.ts b/src/ts/wysiwyg/index.ts
@@ -1,6 +1,6 @@
 import {Constants} from "../constants";
 import {getSelectPosition} from "../editor/getSelectPosition";
-import {setSelectionByPosition} from "../editor/setSelection";
+import {setSelectionByPosition, setSelectionFocus} from "../editor/setSelection";
 import {uploadFiles} from "../upload";
 import {focusEvent, hotkeyEvent, selectEvent} from "../util/editorCommenEvent";
 import {
@@ -262,14 +262,23 @@ class WYSIWYG {
                 return;
             }
 
-            highlightToolbar(vditor);
             if (event.target.tagName === "INPUT") {
                 if (event.target.checked) {
                     event.target.setAttribute("checked", "checked");
                 } else {
                     event.target.removeAttribute("checked");
                 }
+                return;
+            }
+
+            if (event.target.tagName === "IMG") {
+                const range = this.element.ownerDocument.createRange();
+                range.selectNode(event.target);
+                range.collapse(true);
+                setSelectionFocus(range);
             }
+
+            highlightToolbar(vditor);
         });
 
         this.element.addEventListener("keyup", (event: KeyboardEvent & { target: HTMLElement }) => {

diff --git a/src/ts/wysiwyg/inlineTag.ts b/src/ts/wysiwyg/inlineTag.ts
@@ -12,3 +12,17 @@ export const nextIsCode = (range: Range) => {
     }
     return false;
 };
+
+export const nextIsImg = (range: Range) => {
+    if (range.startContainer.nodeType === 3 && range.startContainer.textContent.length === range.startOffset) {
+        let nextNode: HTMLElement = range.startContainer.nextSibling as HTMLElement;
+        while (nextNode && nextNode.textContent === "" && nextNode.nodeType === 3) {
+            nextNode = nextNode.nextSibling as HTMLElement;
+        }
+        if (nextNode && nextNode.nodeType !== 3 && nextNode.tagName === "IMG") {
+            return nextNode;
+        }
+        return false;
+    }
+    return false;
+};