Home Explore Help
Register Sign In
Apq
/
vditor
mirror of https://github.com/Vanessa219/vditor.git
1
0
Fork 0
Files Issues 0 Wiki
Browse Source

:art: fix #155

Van 6 years ago
parent
252de9969e
commit
d1beabf499
7 changed files with 88 additions and 41 deletions
Split View Show Diff Stats
  1. 3 1
      CHANGELOG.md
  2. 25 4
      demo/index-preview.html
  3. 8 6
      demo/index-preview.js
  4. 33 10
      demo/static-preview.html
  5. 2 2
      src/ts/markdown/md2html.ts
  6. 15 17
      src/ts/markdown/previewRender.ts
  7. 2 1
      src/ts/types/index.d.ts

+ 3 - 1
CHANGELOG.md
View File 

@@ -2,6 +2,8 @@
 
 
 ### 升级
 
 
+* v1.9
 
+  * preview 静态方法参数修改为 `(element: HTMLDivElement, markdown: string, options?: IPreviewOptions)`
 
 * v1.8
 
   * `getHTML` 方法移除参数
 
   * `md2html` 静态方法参数修改为 `(mdText: string, options?: IPreviewOptions)`
 
@@ -14,11 +16,11 @@
 
 
 ### TODO
 
 
-* [155](https://github.com/b3log/vditor/issues/155) preview 方法支持多次渲染 `enhancement`
 
 * [121](https://github.com/b3log/vditor/issues/121) 所见即所得 `feature`
 
 
 ### v1.9.1 / 2019-11-04
 
 
+* [155](https://github.com/b3log/vditor/issues/155) preview 方法支持多次渲染 `enhancement`
 
 * [153](https://github.com/b3log/vditor/issues/153) Markdown 渲染空格问题 `bug`
 
 * [152](https://github.com/b3log/vditor/issues/152) 直接调用 getHTML 抛错 `bug`
 
 * [151](https://github.com/b3log/vditor/issues/151) Xcode 复制粘贴后换行增加 `bug`

+ 25 - 4
demo/index-preview.html
View File 

@@ -34,12 +34,20 @@
 
     <meta name="twitter:url" content="https://github.com/b3log/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"/>
 
+    <style>
 
+        .preview {
 
+            max-width: 90%;
 
+            width: 600px;
 
+            margin: 0 auto;
 
+        }
 
+    </style>
 
 </head>
 
 <body>
 
 <h2><a href="https://hacpai.com/article/1549638745630?r=Vanessa" target="_blank">Doc</a></h2>
 
 <h2><a href="index.html">Vditor for you</a></h2>
 
 <h2>Vditor for Preview</h2>
 
-<textarea id="vditorPreview" class="vditor-reset" style="max-width: 90%;width: 600px;margin: 0 auto;display: none">## Guide
 
+<div id="preview"></div>
 
+<textarea id="markdownText" class="preview" style="display:none;">## Guide
 
 
 这是一篇讲解如何正确使用 **Markdown** 的排版示例，学会这个很有必要，能让你的文章有更佳清晰的排版。
 
 
@@ -196,7 +204,21 @@ public class HelloWorld {
 
 
 ### 数学公式
 
 
-$$a^2 + b^2 = \color{red}c^2$$
 
+多行公式块：
 
+
 
+$$
 
+\frac{1}{
 
+  \Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{
 
+  \frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {
 
+    1+\frac{e^{-6\pi}}
 
+    {1+\frac{e^{-8\pi}}{1+\cdots}}
 
+  }
 
+}
 
+$$
 
+
 
+行内公式：
 
+
 
+公式 $a^2 + b^2 = \color{red}c^2$ 是行内。
 
 
 ### 流程图
 
 
@@ -298,7 +320,6 @@ https://v.qq.com/x/cover/zf2z0xpqcculhcz/y0016tj0qvh.html
 
 
 ## 快捷键
 
 
-我们的编辑器支持很多快捷键，具体请参考 [键盘快捷键](https://hacpai.com/article/1474030007391)（或者按 "`?` ":smirk_cat:）
 
-</textarea>
 
+我们的编辑器支持很多快捷键，具体请参考 [键盘快捷键](https://hacpai.com/article/1474030007391)（或者按 "`?` ":smirk_cat:）</textarea>
 
 </body>
 
 </html>

+ 8 - 6
demo/index-preview.js
View File 

@@ -1,9 +1,11 @@
 
 import VditorPreview from '../src/method'
 
 import '../src/assets/scss/classic.scss'
 
 
-VditorPreview.preview(document.getElementById('vditorPreview'), {
 
-  customEmoji: {
 
-    'sd': '💔',
 
-    'j': 'https://unpkg.com/[email protected]/dist/images/emoji/j.png',
 
-  },
 
-})
 
+VditorPreview.preview(document.getElementById('preview'),
 
+  document.getElementById('markdownText').textContent, {
 
+    className: 'preview vditor-reset',
 
+    customEmoji: {
 
+      'sd': '💔',
 
+      'j': 'https://unpkg.com/[email protected]/dist/images/emoji/j.png',
 
+    },
 
+  })

+ 33 - 10
demo/static-preview.html
View File 

@@ -36,12 +36,20 @@
 
     <meta name="twitter:image" content="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png"/>
 
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vditor@latest/dist/index.classic.css"/>
 
     <script src="https://cdn.jsdelivr.net/npm/vditor@latest/dist/method.min.js"></script>
 
+    <style>
 
+        .preview {
 
+            max-width: 90%;
 
+            width: 600px;
 
+            margin: 0 auto;
 
+        }
 
+    </style>
 
 </head>
 
 <body>
 
 <h2><a href="https://hacpai.com/article/1549638745630?r=Vanessa" target="_blank">Doc</a></h2>
 
 <h2><a href="static.html">Vditor for you</a></h2>
 
 <h2>Vditor for Preview</h2>
 
-<textarea id="vditorPreview" class="vditor-reset" style="max-width: 90%;width: 600px;margin: 0 auto;display:none">## Guide
 
+<div id="preview"></div>
 
+<textarea id="markdownText" class="preview" style="display:none;">## Guide
 
 
 这是一篇讲解如何正确使用 **Markdown** 的排版示例，学会这个很有必要，能让你的文章有更佳清晰的排版。
 
 
@@ -198,7 +206,21 @@ public class HelloWorld {
 
 
 ### 数学公式
 
 
-$$a^2 + b^2 = \color{red}c^2$$
 
+多行公式块：
 
+
 
+$$
 
+\frac{1}{
 
+  \Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{
 
+  \frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {
 
+    1+\frac{e^{-6\pi}}
 
+    {1+\frac{e^{-8\pi}}{1+\cdots}}
 
+  }
 
+}
 
+$$
 
+
 
+行内公式：
 
+
 
+公式 $a^2 + b^2 = \color{red}c^2$ 是行内。
 
 
 ### 流程图
 
 
@@ -300,15 +322,16 @@ https://v.qq.com/x/cover/zf2z0xpqcculhcz/y0016tj0qvh.html
 
 
 ## 快捷键
 
 
-我们的编辑器支持很多快捷键，具体请参考 [键盘快捷键](https://hacpai.com/article/1474030007391)（或者按 "`?` ":smirk_cat:）
 
-</textarea>
 
+我们的编辑器支持很多快捷键，具体请参考 [键盘快捷键](https://hacpai.com/article/1474030007391)（或者按 "`?` ":smirk_cat:）</textarea>
 
 <script>
 
-  Vditor.preview(document.getElementById('vditorPreview'), {
 
-    customEmoji: {
 
-      'sd': '💔',
 
-      'j': 'https://unpkg.com/[email protected]/dist/images/emoji/j.png',
 
-    },
 
-  })
 
+  Vditor.preview(document.getElementById('preview'),
 
+    document.getElementById('markdownText').textContent, {
 
+      className: 'preview vditor-reset',
 
+      customEmoji: {
 
+        'sd': '💔',
 
+        'j': 'https://unpkg.com/[email protected]/dist/images/emoji/j.png',
 
+      },
 
+    })
 
 </script>
 
 </body>
 
 </html>

+ 2 - 2
src/ts/markdown/md2html.ts
View File 

@@ -5,8 +5,8 @@ declare const Lute: ILute;
 
 export const loadLuteJs = (vditor?: IVditor) => {
 
     const scriptElement = document.createElement("script");
 
     scriptElement.type = "text/javascript";
 
-    // scriptElement.src = `${CDN_PATH}/vditor@${VDITOR_VERSION}/dist/js/lute/lute.min.js`;
 
-    scriptElement.src = `http://192.168.0.107:9090/lute.min.js?${new Date().getTime()}`;
 
+    scriptElement.src = `${CDN_PATH}/vditor@${VDITOR_VERSION}/dist/js/lute/lute.min.js`;
 
+    // scriptElement.src = `http://192.168.0.107:9090/lute.min.js?${new Date().getTime()}`;
 
     document.getElementsByTagName("head")[0].appendChild(scriptElement);
 
 
     return new Promise((resolve) => {

+ 15 - 17
src/ts/markdown/previewRender.ts
View File 

@@ -8,8 +8,9 @@ import {md2htmlByPreview} from "./md2html";
 
 import {mediaRender} from "./mediaRender";
 
 import {mermaidRender} from "./mermaidRender";
 
 
-export const previewRender = async (element: HTMLTextAreaElement, options?: IPreviewOptions) => {
 
+export const previewRender = async (previewElement: HTMLDivElement, markdown: string, options?: IPreviewOptions) => {
 
     const defaultOption = {
 
+        className: 'vditor-reset',
 
         customEmoji: {},
 
         emojiPath: `${CDN_PATH}/vditor/dist/images/emoji`,
 
         enableHighlight: true,
 
@@ -17,21 +18,18 @@ export const previewRender = async (element: HTMLTextAreaElement, options?: IPre
 
         lang: "zh_CN",
 
     };
 
     options = Object.assign(defaultOption, options);
 
+
 
     const html =
 
-        await md2htmlByPreview(element.textContent, options);
 
-    const divElement = document.createElement("div");
 
-    divElement.innerHTML = html;
 
-    divElement.className = element.className;
 
-    divElement.id = element.id;
 
-    divElement.setAttribute("style", element.getAttribute("style"));
 
-    divElement.style.display = "block";
 
-    element.after(divElement);
 
-    element.remove();
 
-    codeRender(divElement, options.lang);
 
-    highlightRender(options.hljsStyle, options.enableHighlight, divElement);
 
-    mathRenderByLute(divElement);
 
-    mermaidRender(divElement);
 
-    chartRender(divElement);
 
-    abcRender(divElement);
 
-    mediaRender(divElement);
 
+        await md2htmlByPreview(markdown, options);
 
+
 
+    previewElement.innerHTML = html;
 
+    previewElement.className = options.className;
 
+
 
+    codeRender(previewElement, options.lang);
 
+    highlightRender(options.hljsStyle, options.enableHighlight, previewElement);
 
+    mathRenderByLute(previewElement);
 
+    mermaidRender(previewElement);
 
+    chartRender(previewElement);
 
+    abcRender(previewElement);
 
+    mediaRender(previewElement);
 
 };

+ 2 - 1
src/ts/types/index.d.ts
View File 

@@ -142,6 +142,7 @@ interface IResize {
 
 }
 
 
 interface IPreviewOptions {
 
+    className?:string;
 
     hljsStyle?: string;
 
     enableHighlight?: boolean;
 
     customEmoji?: { [key: string]: string };
 
@@ -257,7 +258,7 @@ declare class IVditorConstructor {
 
 
     public static md2html(mdText: string, options?: IPreviewOptions): string;
 
 
-    public static preview(element: HTMLTextAreaElement, options?: IPreviewOptions): void;
 
+    public static preview(element: HTMLDivElement, markdown: string, options?: IPreviewOptions): void;
 
 
     public readonly version: string;
 
     public vditor: IVditor;