🎨 fix #343

Vanessa219 · Apr 28, 2020 · 79d9754 · 79d9754
1 parent e4ae1ef
commit 79d9754
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 18 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -61,6 +61,8 @@
 
 ### v3.1.20 / 2020-04-2x
 
+* [343](https://github.com/Vanessa219/vditor/issues/343) 添加初始化大纲展现参数 `改进功能`
+
 ### v3.1.19 / 2020-04-26
 
 * [341](https://github.com/Vanessa219/vditor/issues/341) Can not delete the image at IR mode `修复缺陷`
@@ -106,7 +108,7 @@
 * [283](https://github.com/Vanessa219/vditor/issues/283) 添加 SetSetext 配置 `引入特性`
 * [278](https://github.com/Vanessa219/vditor/issues/278) IR 细节修改 `修复缺陷`
 * 文档更新
-  * 添加 `options.minHeight`
+  * 添加 `options.minHeight`, `options.outline`
   * `options.counter` 修改为 `counter?: { enable: boolean; max?: number; type: "markdown" | "text"; }`
   * counter 位置移动到 toolbar 上
   * `options.hideToolbar` 修改为 `toolbarConfig: { hide?: boolean, pin?: boolean }`

diff --git a/demo/index.js b/demo/index.js
@@ -50,6 +50,7 @@ if (window.innerWidth < 768) {
 
 window.vditor = new Vditor('vditor', {
   toolbar,
+  outline: true,
   debugger: true,
   typewriterMode: true,
   placeholder: 'placeholder',

diff --git a/src/ts/toolbar/Outline.ts b/src/ts/toolbar/Outline.ts
@@ -4,26 +4,29 @@ import {getEventName} from "../util/compatibility";
 import {renderOutline} from "../util/fixBrowserBehavior";
 import {MenuItem} from "./MenuItem";
 
+export const toggleOutline = (vditor: IVditor, btnElement: Element) => {
+    if (btnElement.classList.contains(Constants.CLASS_MENU_DISABLED)) {
+        return;
+    }
+
+    const outlineElement = vditor.element.querySelector(".vditor-outline") as HTMLElement;
+    if (btnElement.classList.contains("vditor-menu--current")) {
+        outlineElement.style.display = "none";
+        btnElement.classList.remove("vditor-menu--current");
+    } else {
+        outlineElement.style.display = "block";
+        renderOutline(vditor);
+        btnElement.classList.add("vditor-menu--current");
+    }
+    setPadding(vditor);
+};
+
 export class Outline extends MenuItem {
     constructor(vditor: IVditor, menuItem: IMenuItem) {
         super(vditor, menuItem);
         this.element.children[0].addEventListener(getEventName(), (event) => {
             event.preventDefault();
-            const btnElement = this.element.firstElementChild;
-            if (btnElement.classList.contains(Constants.CLASS_MENU_DISABLED)) {
-                return;
-            }
-
-            const outlineElement = vditor.element.querySelector(".vditor-outline") as HTMLElement;
-            if (btnElement.classList.contains("vditor-menu--current")) {
-                outlineElement.style.display = "none";
-                btnElement.classList.remove("vditor-menu--current");
-            } else {
-                outlineElement.style.display = "block";
-                renderOutline(vditor);
-                btnElement.classList.add("vditor-menu--current");
-            }
-            setPadding(vditor);
+            toggleOutline(vditor, this.element.firstElementChild);
         });
     }
 }
diff --git a/src/ts/ui/initUI.ts b/src/ts/ui/initUI.ts
@@ -1,6 +1,7 @@
 import {i18n} from "../i18n";
 import {html2md} from "../sv/html2md";
 import {setEditMode} from "../toolbar/EditMode";
+import {toggleOutline} from "../toolbar/Outline";
 import {setContentTheme} from "./setContentTheme";
 import {setTheme} from "./setTheme";
 
@@ -75,6 +76,9 @@ export const initUI = (vditor: IVditor) => {
     }
 
     setEditMode(vditor, vditor.options.mode, afterRender(vditor, contentElement));
+    if (vditor.options.outline && vditor.toolbar.elements.outline) {
+        toggleOutline(vditor, vditor.toolbar.elements.outline.firstElementChild);
+    }
 };
 
 export const setPadding = (vditor: IVditor) => {

diff --git a/src/ts/util/Options.ts b/src/ts/util/Options.ts
@@ -72,6 +72,7 @@ export class Options {
         },
         lang: "zh_CN",
         mode: "wysiwyg",
+        outline: false,
         placeholder: "",
         preview: {
             delay: 1000,

diff --git a/types/index.d.ts b/types/index.d.ts
@@ -310,10 +310,9 @@ interface IOptions {
     value?: string;
     /** 是否显示日志。默认值: false */
     debugger?: boolean;
-    /** 编辑器异步渲染完成后的回调方法 */
-    after?: () => void;
     /** 是否启用打字机模式。默认值: false */
     typewriterMode?: boolean;
+    /** @link https://hacpai.com/article/1549638745630#options-keymap */
     keymap?: { [key: string]: string };
     /** 编辑器总高度。默认值: 'auto' */
     height?: number | string;
@@ -327,6 +326,7 @@ interface IOptions {
     lang?: (keyof II18nLang);
     /** @link https://hacpai.com/article/1549638745630#options-toolbar */
     toolbar?: Array<string | IMenuItem>;
+    /** @link https://hacpai.com/article/1549638745630#options-resize */
     resize?: IResize;
     /** @link https://hacpai.com/article/1549638745630#options-counter */
     counter?: {
@@ -354,11 +354,16 @@ interface IOptions {
     theme?: "classic" | "dark";
     /** @link https://hacpai.com/article/1549638745630#options-upload */
     upload?: IUpload;
+    /** @link https://hacpai.com/article/1549638745630#options-classes */
     classes?: IClasses;
     /** 配置自建 CDN 地址。默认值: 'https://cdn.jsdelivr.net/npm/vditor@${VDITOR_VERSION}' */
     cdn?: string;
     /** tab 键操作字符串，支持 \t 及任意字符串 */
     tab?: string;
+    /** 是否展现大纲。默认值：'false' */
+    outline?: boolean;
+    /** 编辑器异步渲染完成后的回调方法 */
+    after?(): void;
 
     /** 输入后触发 */
     input?(value: string, previewElement?: HTMLElement): void;