feat: 图片相关&链接open (#1348)

* feat: 图片相关 - #1220 改善图片预览问题，增加options->preview->showImage: boolean控制是否双击预览 - 增加options->previewImage函数获取触发的图片节点，参数img: HTMLImageElement 链接相关 - 增加options-> link属性，options->open: boolean控制点击打开链接，intercept函数控制点击的链接，参数 url: string * style: 回滚主分支的代码格式 * refactor: 重新对link的触发函数命名 * docs: 增加对img和link的readme
Vanessa219 · Jan 15, 2023 · 6da6b67 · 6da6b67
1 parent 9dbbc79
commit 6da6b67
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -297,6 +297,7 @@ new Vditor('vditor', {
 | url | md 解析请求 | - |
 | parse(element: HTMLElement) | 预览回调 | - |
 | transform(html: string): string | 渲染之前回调 | - |
+| showImage: boolean | 是否双击图片预览 | _ |
 
 #### options.preview.hljs
 
@@ -352,6 +353,24 @@ new Vditor('vditor', {
 | className | 按钮类名 | - |
 | click(key: string) | 按钮点击回调事件 | - |
 
+#### options.previewImage
+``` ts
+previewImage: (img: HTMLImageElement) => void;
+```
+对原图片双击预览的拦截，对图片的扩展操作。
+
+#### options.link
+``` ts
+link?: {
+  open?: boolean;
+  trigger?: (href: string) => void;
+}
+```
+|   | 说明 | 默认值 |
+| - | - | - |
+| open | 是否点击打开(window.open)地址 | - |
+| trigger | 地址点击触发 | - |
+
 #### options.hint
 
 |   | 说明 | 默认值 |

diff --git a/src/ts/ir/index.ts b/src/ts/ir/index.ts
@@ -149,7 +149,12 @@ class IR {
             // 打开链接
             const aElement = hasClosestByAttribute(event.target, "data-type", "a");
             if (aElement && (!aElement.classList.contains("vditor-ir__node--expand"))) {
-                window.open(aElement.querySelector(":scope > .vditor-ir__marker--link").textContent);
+                if (vditor.options.link && vditor.options.link.trigger) {
+                    vditor.options.link.trigger(aElement.querySelector(":scope > .vditor-ir__marker--link").textContent);
+                }
+                if (vditor.options.link && vditor.options.link.open) {
+                    window.open(aElement.querySelector(":scope > .vditor-ir__marker--link").textContent);
+                }
                 return;
             }
 

diff --git a/src/ts/preview/index.ts b/src/ts/preview/index.ts
@@ -52,7 +52,10 @@ export class Preview {
                 }
                 return;
             }
-            if (event.target.tagName === "IMG") {
+            if (vditor.options.previewImage) {
+                vditor.options.previewImage(event.target as HTMLImageElement)
+            }
+            if (vditor.options.preview.showImage) {
                 previewImage(event.target as HTMLImageElement, vditor.options.lang, vditor.options.theme);
             }
         });

diff --git a/src/ts/util/editorCommonEvent.ts b/src/ts/util/editorCommonEvent.ts
@@ -29,7 +29,12 @@ 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") {
-            previewImage(event.target as HTMLImageElement, vditor.options.lang, vditor.options.theme);
+            if (vditor.options.previewImage) {
+                vditor.options.previewImage(event.target as HTMLImageElement)
+            }
+            if (vditor.options.preview.showImage) {
+                previewImage(event.target as HTMLImageElement, vditor.options.lang, vditor.options.theme);
+            }
         }
     });
 };

diff --git a/types/index.d.ts b/types/index.d.ts
@@ -484,6 +484,7 @@ interface IPreview {
     theme?: IPreviewTheme;
     /** @link https://ld246.com/article/1549638745630#options-preview-actions  */
     actions?: Array<IPreviewAction | IPreviewActionCustom>;
+    showImage?: boolean;
 
     /** 预览回调 */
     parse?(element: HTMLElement): void;
@@ -619,6 +620,11 @@ interface IOptions {
     mode?: "wysiwyg" | "sv" | "ir";
     /** @link https://ld246.com/article/1549638745630#options-preview */
     preview?: IPreview;
+    previewImage?: (img: HTMLImageElement) => void;
+    link?: {
+        open?: boolean;
+        trigger?: (href: string) => void;
+    },
     /** @link https://ld246.com/article/1549638745630#options-hint */
     hint?: IHint;
     /** @link https://ld246.com/article/1549638745630#options-toolbarConfig */