feat: 暴露预览区域图片点击事件的回调

Tencent · Jun 9, 2022 · 203ff13 · 203ff13
1 parent 6d8a769
commit 203ff13
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 2 deletions.
diff --git a/examples/preview_only.html b/examples/preview_only.html
@@ -20,6 +20,7 @@
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css"
     integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
   <link href="./markdown/basic.md" rel="preload">
+  <link rel="stylesheet" href="https://fengyuanchen.github.io/viewerjs/css/viewer.css">
 </head>
 
 <body>
@@ -28,6 +29,7 @@
   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.6.0/dist/echarts.js"></script>
   <!--<script src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>-->
   <script src="../dist/cherry-markdown.js"></script>
+  <script src="https://fengyuanchen.github.io/viewerjs/js/viewer.js"></script>
   <script src="./scripts/preview-demo.js"></script>
 </body>
 

diff --git a/examples/scripts/preview-demo.js b/examples/scripts/preview-demo.js
@@ -66,6 +66,20 @@ var cherryConfig = {
   editor: {
     defaultModel: 'previewOnly',
   },
+  callback: {
+    onClickPreview: function(e) {
+      const {target} = e;
+      if(target.tagName === 'IMG') {
+        console.log('click img', target);
+        const tmp = new Viewer(target, {
+            button: false,
+            navbar: false,
+            title: [1, (image, imageData) => `${image.alt.replace(/#.+$/, '')} (${imageData.naturalWidth} × ${imageData.naturalHeight})`],
+          });
+        tmp.show();
+      }
+    }
+  },
   previewer: {
     // 自定义markdown预览区域class
     // className: 'markdown'

diff --git a/src/Cherry.config.js b/src/Cherry.config.js
@@ -29,6 +29,7 @@ const callbacks = {
   afterChange: (text, html) => {},
   afterInit: (text, html) => {},
   beforeImageMounted: (srcProp, src) => ({ srcProp, src }),
+  onClickPreview: (event) => {},
 };
 
 /** @type {Partial<import('~types/cherry').CherryOptions>} */
@@ -215,6 +216,8 @@ const defaultConfig = {
     afterChange: callbacks.afterChange,
     afterInit: callbacks.afterInit,
     beforeImageMounted: callbacks.beforeImageMounted,
+    // 预览区域点击事件，previewer.enablePreviewerBubble = true 时生效
+    onClickPreview: callbacks.onClickPreview,
   },
   previewer: {
     dom: false,

diff --git a/src/Cherry.js b/src/Cherry.js
@@ -72,7 +72,7 @@ export default class Cherry extends CherryStatic {
       editor: 'show',
     };
 
-    if (this.options.isPreviewOnly) {
+    if (this.options.isPreviewOnly || this.options.editor.defaultModel === 'previewOnly') {
       this.options.toolbars.showToolbar = false;
       this.options.editor.defaultModel = 'previewOnly';
       this.status.editor = 'hide';

diff --git a/src/toolbars/PreviewerBubble.js b/src/toolbars/PreviewerBubble.js
@@ -76,7 +76,13 @@ export default class PreviewerBubble {
 
   $onClick(e) {
     // 只有双栏编辑模式才出现该功能
-    if (this.previewer.$cherry.getStatus().editor === 'hide') {
+    const cherryStatus = this.previewer.$cherry.getStatus();
+    if (cherryStatus.editor === 'hide') {
+      if (cherryStatus.previewer === 'show') {
+        // 纯预览模式下，支持点击放大图片功能（以回调的形式实现，需要业务侧实现图片放大功能）
+        this.previewer.$cherry.options.callback.onClickPreview &&
+          this.previewer.$cherry.options.callback.onClickPreview(e);
+      }
       return;
     }
     const { target } = e;

diff --git a/types/cherry.d.ts b/types/cherry.d.ts
@@ -22,6 +22,7 @@ export interface CherryOptions {
     afterInit: CherryLifecycle;
     /** img 标签挂载前触发，可用于懒加载等场景 */
     beforeImageMounted: (srcProp: string, src: string) => { srcProp: string; src: string };
+    onClickPreview: (e: MouseEvent) => void;
   };
   /** 预览区域配置 */
   previewer: CherryPreviewerOptions;