Home Esplora Aiuto
Registrati Accedi
Apq
/
vditor
mirror da https://github.com/Vanessa219/vditor.git
1
0
Forka 0
File Problemi 0 Wiki
Sfoglia il codice sorgente

:sparkles: fix #94

Liyuan Li 5 anni fa
parent
29ce633214
commit
716f28d912
7 ha cambiato i file con 37 aggiunte e 12 eliminazioni
Visualizzazione separata Mostra Diff Stats
  1. 1 0
      CHANGELOG.md
  2. 22 5
      demo/static-preview.html
  3. 2 2
      src/index.ts
  4. 5 3
      src/ts/markdown/outlineRender.ts
  5. 3 0
      src/ts/markdown/previewRender.ts
  6. 2 2
      src/ts/ui/initUI.ts
  7. 2 0
      types/index.d.ts

+ 1 - 0
CHANGELOG.md
Vedi File 

@@ -93,6 +93,7 @@
 
   * 添加 `options.upload.setHeaders: { [key: string]: string }`
 
   * 为 `options.toolbar` 添加 outdent，indent, outline
 
   * 添加静态方法 `outlineRender`
 
+  * IPreviewOptions 添加 `after`
 
 
 ### v3.0.12 / 2020-04-06

+ 22 - 5
demo/static-preview.html
Vedi File 

@@ -34,8 +34,8 @@
 
     <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%;
 
@@ -43,6 +43,16 @@
 
             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 @@
 
 <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 @@ https://www.youtube.com/watch?v=S4xoOW4DVKE
 
         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>

+ 2 - 2
src/index.ts
Vedi File 

@@ -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,

+ 5 - 3
src/ts/markdown/outlineRender.ts
Vedi File 

@@ -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);
 
             }
 
         }
 
     });

+ 3 - 0
src/ts/markdown/previewRender.ts
Vedi File 

@@ -112,4 +112,7 @@ export const previewRender = async (previewElement: HTMLDivElement, markdown: st
 
     if (mergedOptions.anchor) {
 
         anchorRender();
 
     }
 
+    if (mergedOptions.after) {
 
+        mergedOptions.after();
 
+    }
 
 };

+ 2 - 2
src/ts/ui/initUI.ts
Vedi File 

@@ -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);

+ 2 - 0
types/index.d.ts
Vedi File 

@@ -271,6 +271,8 @@ interface IPreviewOptions {
 
     markdown?: IMarkdownConfig;
 
 
     transform?(html: string): string;
 
+
 
+    after?(): void;
 
 }
 
 
 interface IHintData {