🎨 fix #875

CHANGELOG.md

@@ -88,9 +88,13 @@
 
 ### v3.7.5 / 2020-12-xx
 
+* [875](https://github.com/Vanessa219/vditor/issues/875) 增加大纲位置配置 `引入特性`
 * [873](https://github.com/Vanessa219/vditor/issues/873) graphviz，mermaid 在为空时不应出现错误提示 `改进功能`
 * [872](https://github.com/Vanessa219/vditor/issues/872) vditor.options.upload.file 支持 await `改进功能`
-
+* 文档修改
+  * 3.7.5
+    * `options.outline` 修改为 `{ enable: boolean, position: "left" | "right" }` 
+
 ### v3.7.4 / 2020-12-26
 
 * [871](https://github.com/Vanessa219/vditor/issues/871) 大纲标题过长需显示省略号 `改进功能`

demo/index.js

@@ -55,7 +55,10 @@ window.vditor = new Vditor('vditor', {
   toolbar,
   mode: 'wysiwyg',
   height: window.innerHeight + 100,
-  outline: true,
+  outline: {
+    enable: true,
+    position: "right"
+  },
   debugger: true,
   typewriterMode: true,
   placeholder: 'Hello, Vditor!',

src/assets/scss/_reset.scss

@@ -523,6 +523,11 @@
     display: none;
     overflow: auto;
 
+    &--right {
+      border-right: 0;
+      border-left: 1px solid var(--border-color);
+    }
+
     &::-webkit-scrollbar {
       display: none;
     }

src/ts/toolbar/EditMode.ts

@@ -146,7 +146,7 @@ export const setEditMode = (vditor: IVditor, type: string, event: Event | string
         vditor.toolbar.elements["edit-mode"].querySelector(`button[data-mode="${vditor.currentMode}"]`).classList.add("vditor-menu--current");
     }
 
-    vditor.outline.toggle(vditor, vditor.currentMode !== "sv" && vditor.options.outline);
+    vditor.outline.toggle(vditor, vditor.currentMode !== "sv" && vditor.options.outline.enable);
 };
 
 export class EditMode extends MenuItem {

src/ts/toolbar/Outline.ts

@@ -14,8 +14,8 @@ export class Outline extends MenuItem {
             if (btnElement.classList.contains(Constants.CLASS_MENU_DISABLED)) {
                 return;
             }
-            vditor.options.outline = !this.element.firstElementChild.classList.contains("vditor-menu--current");
-            vditor.outline.toggle(vditor, vditor.options.outline);
+            vditor.options.outline.enable = !this.element.firstElementChild.classList.contains("vditor-menu--current");
+            vditor.outline.toggle(vditor, vditor.options.outline.enable);
         });
     }
 }

src/ts/ui/initUI.ts

@@ -32,7 +32,9 @@ export const initUI = (vditor: IVditor) => {
     const contentElement = document.createElement("div");
     contentElement.className = "vditor-content";
 
-    contentElement.appendChild(vditor.outline.element);
+    if (vditor.options.outline.position === "left") {
+        contentElement.appendChild(vditor.outline.element);
+    }
 
     contentElement.appendChild(vditor.wysiwyg.element.parentElement);
 
@@ -46,6 +48,11 @@ export const initUI = (vditor: IVditor) => {
         contentElement.appendChild(vditor.devtools.element);
     }
 
+    if (vditor.options.outline.position === "right") {
+        vditor.outline.element.classList.add("vditor-outline--right");
+        contentElement.appendChild(vditor.outline.element);
+    }
+
     if (vditor.upload) {
         contentElement.appendChild(vditor.upload.element);
     }
@@ -110,7 +117,7 @@ export const setPadding = (vditor: IVditor) => {
     if (vditor.preview.element.style.display !== "block" || vditor.currentMode === "sv") {
         vditor.toolbar.element.style.paddingLeft = Math.max(5,
             parseInt(vditor[vditor.currentMode].element.style.paddingLeft || "0", 10) +
-            vditor.outline.element.offsetWidth) + "px";
+            (vditor.options.outline.position === "left" ? vditor.outline.element.offsetWidth : 0)) + "px";
     }
 };
 

src/ts/util/Options.ts

@@ -42,7 +42,10 @@ export class Options {
         icon: "ant",
         lang: "zh_CN",
         mode: "ir",
-        outline: false,
+        outline: {
+            enable: false,
+            position: "left",
+        },
         placeholder: "",
         preview: {
             actions: ["desktop", "tablet", "mobile", "mp-wechat", "zhihu"],

types/index.d.ts

@@ -542,9 +542,11 @@ interface IOptions {
     cdn?: string;
     /** tab 键操作字符串，支持 \t 及任意字符串 */
     tab?: string;
-    /** 是否展现大纲。默认值：'false' */
-    outline?: boolean;
-
+    /** @link https://ld246.com/article/1549638745630#options-outline */
+    outline?: {
+        enable: boolean,
+        position: "left" | "right",
+    };
     /** 编辑器异步渲染完成后的回调方法 */
     after?(): void;