✨ fix #94

Vanessa219 · Apr 14, 2020 · 716f28d · 716f28d
1 parent 29ce633
commit 716f28d
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -93,6 +93,7 @@
   * 添加 `options.upload.setHeaders: { [key: string]: string }`
   * 为 `options.toolbar` 添加 outdent，indent, outline
   * 添加静态方法 `outlineRender`
+  * IPreviewOptions 添加 `after`
 
 ### v3.0.12 / 2020-04-06
 

diff --git a/demo/static-preview.html b/demo/static-preview.html
@@ -34,15 +34,25 @@
     <meta name="twitter:url" content="https://hacpai.com/tag/vditor"/>
     <meta property="og:image" content="https://cdn.jsdelivr.net/npm/vditor/src/assets/images/logo.png"/>
     <meta name="twitter:image" content="https://cdn.jsdelivr.net/npm/vditor/src/assets/images/logo.png"/>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vditor@latest/dist/index.css"/>
-    <script src="https://cdn.jsdelivr.net/npm/vditor@latest/dist/method.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vditor@3.1.7/dist/index.css"/>
+    <script src="https://cdn.jsdelivr.net/npm/vditor@3.1.7/dist/method.min.js"></script>
     <style>
         .preview {
             max-width: 90%;
             width: 600px;
             margin: 0 auto;
             padding-bottom: 20px;
         }
+
+        #outline {
+            position: fixed;
+            width: 290px;
+            top: 20px;
+            right: 20px;
+            bottom: 20px;
+            overflow: auto;
+            color: var(--textarea-text-color);
+        }
     </style>
 </head>
 <body>
@@ -60,6 +70,7 @@ <h2><a href="static.html" id="VditorForYou">Vditor for you</a></h2>
 <div id="previewWrap">
     <div id="preview" class="preview vditor-reset--dark"></div>
 </div>
+<div id="outline" class="vditor"></div>
 <textarea id="zh_CNText" style="display:none;">[ToC]
 ## 教程
 
@@ -696,23 +707,29 @@ <h2><a href="static.html" id="VditorForYou">Vditor for you</a></h2>
         toc: true,
       },
       hljs: {
-        style: 'native'
+        style: 'native',
       },
       speech: {
         enable: true,
       },
       anchor: true,
+      after () {
+        Vditor.outlineRender(document.getElementById('preview'), document.getElementById('outline'))
+      },
     })
 
   const setTheme = (theme) => {
     const previewWrapElement = document.getElementById('previewWrap')
     const previewElement = document.getElementById('preview')
+    const outlineElement = document.getElementById('outline')
     if (theme === 'dark') {
-      previewWrapElement.className = 'vditor-reset--dark'
+      document.body.classList.add('vditor-reset--dark')
       previewElement.classList.add('vditor-reset--dark')
+      outlineElement.classList.add('vditor-reset--dark')
     } else {
-      previewWrapElement.className = ''
+      document.body.classList.remove('vditor-reset--dark')
       previewElement.classList.remove('vditor-reset--dark')
+      outlineElement.classList.remove('vditor-reset--dark')
     }
   }
 </script>

diff --git a/src/index.ts b/src/index.ts
@@ -97,9 +97,9 @@ class Vditor extends VditorMethod {
             this.vditor.upload = new Upload();
         }
 
-        // addScript("src/js/lute/lute.min.js", "vditorLuteScript").then(() => {
+        addScript("src/js/lute/lute.min.js", "vditorLuteScript").then(() => {
         // addScript(`http://192.168.2.248:9090/lute.min.js?${new Date().getTime()}`, "vditorLuteScript").then(() => {
-        addScript(`${mergedOptions.cdn}/dist/js/lute/lute.min.js`, "vditorLuteScript").then(() => {
+        // addScript(`${mergedOptions.cdn}/dist/js/lute/lute.min.js`, "vditorLuteScript").then(() => {
             this.vditor.lute = setLute({
                 autoSpace: this.vditor.options.preview.markdown.autoSpace,
                 chinesePunct: this.vditor.options.preview.markdown.chinesePunct,

diff --git a/src/ts/markdown/outlineRender.ts b/src/ts/markdown/outlineRender.ts
@@ -20,12 +20,12 @@ export const outlineRender = (contentElement: HTMLElement, targetElement: Elemen
     targetElement.addEventListener("click", (event: Event & { target: HTMLElement }) => {
         const itemElement = event.target;
         if (itemElement.classList.contains("vditor-outline__item")) {
+            const id = itemElement.getAttribute("data-id");
             if (vditor) {
-                const id = itemElement.getAttribute("data-id");
                 if (vditor.options.height === "auto") {
-                    let windowScrollY = document.getElementById(id).offsetTop + vditor.element.offsetTop
+                    let windowScrollY = document.getElementById(id).offsetTop + vditor.element.offsetTop;
                     if (!vditor.options.toolbarConfig.pin) {
-                        windowScrollY += vditor.toolbar.element.offsetHeight
+                        windowScrollY += vditor.toolbar.element.offsetHeight;
                     }
                     window.scrollTo(window.scrollX, windowScrollY);
                 } else {
@@ -34,6 +34,8 @@ export const outlineRender = (contentElement: HTMLElement, targetElement: Elemen
                     }
                     contentElement.scrollTop = document.getElementById(id).offsetTop;
                 }
+            } else {
+                window.scrollTo(window.scrollX, document.getElementById(id).offsetTop);
             }
         }
     });

diff --git a/src/ts/markdown/previewRender.ts b/src/ts/markdown/previewRender.ts
@@ -112,4 +112,7 @@ export const previewRender = async (previewElement: HTMLDivElement, markdown: st
     if (mergedOptions.anchor) {
         anchorRender();
     }
+    if (mergedOptions.after) {
+        mergedOptions.after();
+    }
 };
diff --git a/src/ts/ui/initUI.ts b/src/ts/ui/initUI.ts
@@ -26,9 +26,9 @@ export const initUI = (vditor: IVditor) => {
     if (vditor.toolbar.elements.outline) {
         const outlineElement = document.createElement("div");
         outlineElement.className = "vditor-outline";
-        let top = 0
+        let top = 0;
         if (vditor.options.toolbarConfig.pin) {
-            top = vditor.toolbar.element.clientHeight
+            top = vditor.toolbar.element.clientHeight;
         }
         outlineElement.innerHTML = `<div style='top:${top}px'></div>`;
         contentElement.appendChild(outlineElement);

diff --git a/types/index.d.ts b/types/index.d.ts
@@ -271,6 +271,8 @@ interface IPreviewOptions {
     markdown?: IMarkdownConfig;
 
     transform?(html: string): string;
+
+    after?(): void;
 }
 
 interface IHintData {