:refactor: https://github.com/Vanessa219/vditor/pull/1348

CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ### 升级
 * 3.9
-  * 添加 option.link 
+  * 添加 option.link 和 options.image
 * 3.8
   * 添加 plantumlRender 方法
   * options.input 移除 previewElement 参数

README.md

@@ -297,7 +297,6 @@ new Vditor('vditor', {
 | url | md 解析请求 | - |
 | parse(element: HTMLElement) | 预览回调 | - |
 | transform(html: string): string | 渲染之前回调 | - |
-| showImage: boolean | 是否双击图片预览 | _ |
 
 #### options.preview.hljs
 
@@ -353,18 +352,19 @@ new Vditor('vditor', {
 | className | 按钮类名 | - |
 | click(key: string) | 按钮点击回调事件 | - |
 
-#### options.previewImage
-``` ts
-previewImage: (img: HTMLImageElement) => void;
-```
-对原图片双击预览的拦截，对图片的扩展操作。
+#### options.image
+
+|   | 说明 | 默认值 |
+| - | - | - |
+| isPreview | 是否预览图片 | true |
+| preview(bom: Element) => void | 图片预览处理 | - |
 
 #### options.link
 
 |   | 说明 | 默认值 |
 | - | - | - |
-| open | 是否打开链接地址 | true |
-| trigger(bom: Element) => void | 点击链接触发事件 | - |
+| isOpen | 是否打开链接地址 | true |
+| click(bom: Element) => void | 点击链接事件 | - |
 
 #### options.hint
 

README_en_US.md

@@ -327,12 +327,19 @@ Default: ["desktop", "tablet", "mobile", "mp-wechat", "zhihu"]
 | className | Button Class | - |
 | click(key: string) | Click Event | - |
 
+#### options.image
+
+|   | Explanation | Default |
+| - | - | - |
+| isPreview | Whether to preview the picture | true |
+| preview(bom: Element) => void | Image preview processing | - |
+
 #### options.link
 
 |   | Explanation | Default |
 | - | - | - |
-| open | Whether to open the link address | true |
-| trigger(bom: Element) => void | Click link trigger event | - |
+| isOpen | Whether to open the link address | true |
+| click(bom: Element) => void | Click link event | - |
 
 #### options.hint
 

demo/index.js

@@ -55,12 +55,6 @@ const initVditor = (language) => {
     cdn: 'http://localhost:9000',
     toolbar,
     lang: language,
-    link: {
-      open: false,
-      trigger(bom){
-        console.log(bom)
-      }
-    },
     mode: 'wysiwyg',
     height: window.innerHeight + 100,
     outline: {

src/ts/ir/index.ts

@@ -149,9 +149,9 @@ class IR {
             // 打开链接
             const aElement = hasClosestByAttribute(event.target, "data-type", "a");
             if (aElement && (!aElement.classList.contains("vditor-ir__node--expand"))) {
-                if (vditor.options.link.trigger) {
-                    vditor.options.link.trigger(aElement.querySelector(":scope > .vditor-ir__marker--link"));
-                } else if (vditor.options.link.open) {
+                if (vditor.options.link.click) {
+                    vditor.options.link.click(aElement.querySelector(":scope > .vditor-ir__marker--link"));
+                } else if (vditor.options.link.isOpen) {
                     window.open(aElement.querySelector(":scope > .vditor-ir__marker--link").textContent);
                 }
                 return;

src/ts/preview/index.ts

@@ -52,11 +52,21 @@ export class Preview {
                 }
                 return;
             }
-            if (vditor.options.previewImage) {
-                vditor.options.previewImage(event.target as HTMLImageElement)
+            if (event.target.tagName === "A") {
+                if (vditor.options.link.click) {
+                    vditor.options.link.click(event.target);
+                } else if (vditor.options.link.isOpen) {
+                    window.open(event.target.getAttribute("href"));
+                }
+                event.preventDefault();
+                return;
             }
-            if (vditor.options.preview.showImage) {
-                previewImage(event.target as HTMLImageElement, vditor.options.lang, vditor.options.theme);
+            if (event.target.tagName === "IMG") {
+                if (vditor.options.image.preview) {
+                    vditor.options.image.preview(event.target)
+                } else if (vditor.options.image.isPreview) {
+                    previewImage(event.target as HTMLImageElement, vditor.options.lang, vditor.options.theme);
+                }
             }
         });
 

src/ts/util/Options.ts

@@ -1,5 +1,5 @@
-import { Constants } from "../constants";
-import { merge } from "./merge";
+import {Constants} from "../constants";
+import {merge} from "./merge";
 
 export class Options {
     public options: IOptions;
@@ -60,7 +60,10 @@ export class Options {
             theme: Constants.THEME_OPTIONS,
         },
         link: {
-            open: true,
+            isOpen: true,
+        },
+        image: {
+            isPreview: true,
         },
         resize: {
             enable: false,

src/ts/util/editorCommonEvent.ts

@@ -29,10 +29,9 @@ export const focusEvent = (vditor: IVditor, editorElement: HTMLElement) => {
 export const dblclickEvent = (vditor: IVditor, editorElement: HTMLElement) => {
     editorElement.addEventListener("dblclick", (event: MouseEvent & { target: HTMLElement }) => {
         if (event.target.tagName === "IMG") {
-            if (vditor.options.previewImage) {
-                vditor.options.previewImage(event.target as HTMLImageElement)
-            }
-            if (vditor.options.preview.showImage) {
+            if (vditor.options.image.preview) {
+                vditor.options.image.preview(event.target);
+            } else if (vditor.options.image.isPreview) {
                 previewImage(event.target as HTMLImageElement, vditor.options.lang, vditor.options.theme);
             }
         }

src/ts/wysiwyg/index.ts

@@ -425,9 +425,9 @@ class WYSIWYG {
 
             // 打开链接
             if (event.target.tagName === "A") {
-                if (vditor.options.link.trigger) {
-                    vditor.options.link.trigger(event.target);
-                } else if (vditor.options.link.open) {
+                if (vditor.options.link.click) {
+                    vditor.options.link.click(event.target);
+                } else if (vditor.options.link.isOpen) {
                     window.open(event.target.getAttribute("href"));
                 }
                 event.preventDefault();

types/index.d.ts

@@ -484,7 +484,6 @@ interface IPreview {
     theme?: IPreviewTheme;
     /** @link https://ld246.com/article/1549638745630#options-preview-actions  */
     actions?: Array<IPreviewAction | IPreviewActionCustom>;
-    showImage?: boolean;
 
     /** 预览回调 */
     parse?(element: HTMLElement): void;
@@ -620,10 +619,13 @@ interface IOptions {
     mode?: "wysiwyg" | "sv" | "ir";
     /** @link https://ld246.com/article/1549638745630#options-preview */
     preview?: IPreview;
-    previewImage?: (img: HTMLImageElement) => void;
     link?: {
-        open?: boolean;
-        trigger?: (bom: Element) => void;
+        isOpen?: boolean;
+        click?: (bom: Element) => void;
+    },
+    image?: {
+        isPreview?: boolean;
+        preview?: (bom: Element) => void;
     },
     /** @link https://ld246.com/article/1549638745630#options-hint */
     hint?: IHint;