:art: fix #231

CHANGELOG.md

@@ -49,6 +49,10 @@
 
 * [open issues](https://github.com/Vanessa219/vditor/issues)
 
+### v3.0.5 / undefined
+ 
+* [231](https://github.com/Vanessa219/vditor/issues/231) 支持直接传入元素进行初始化 `引入特性`
+
 ### v3.0.4 / 2020-03-25
 
 * [232](https://github.com/Vanessa219/vditor/issues/232) 【IR&WYSIWYG】围栏代码块 info 部分自动完成 `引入特性`
@@ -66,6 +70,8 @@
 * 文档更新
   * 修改 `options.mode` 可选值为：'sv', 'wysiwyg', 'ir'
   * toolbar 中的 wysiwyg 修改为 'edit-mode'
+  * id 可以传入 element
+  * cache 修改为 {enable: boolean, id: string}
 
 ### v2.3.0 / 2020-03-12
 

src/index.ts

@@ -38,47 +38,35 @@ class Vditor extends VditorMethod {
     public vditor: IVditor;
 
     /**
-     * @param target 要挂载 Vditor 的元素或者元素 ID。
+     * @param id 要挂载 Vditor 的元素或者元素 ID。
      * @param options Vditor 参数
      */
-    constructor(target: string | HTMLElement, options?: IOptions) {
+    constructor(id: string | HTMLElement, options?: IOptions) {
         super();
         this.version = VDITOR_VERSION;
-        const id = typeof target === "string" ? target : undefined;
-        const el =
-            target instanceof HTMLElement
-                ? target
-                : document.getElementById(id);
-
-        let cacheKey: string | undefined;
-        if (options.cache === false) {
-            cacheKey = undefined;
-        } else if (typeof options.cache === "string") {
-            cacheKey = options.cache;
-        } else if (id) {
-            cacheKey = `vditor${id}`;
-        } else if (options.cache === true) {
-            throw new Error(
-                "Options cache must be a string when init without id.",
-            );
+
+        if (typeof id === "string") {
+            id = document.getElementById(id);
+            if (!options.cache.id) {
+                options.cache.id = `vditor${id}`;
+            }
         }
 
         const getOptions = new Options(options);
         const mergedOptions = getOptions.merge();
 
         if (!(mergedOptions.lang === "en_US" || mergedOptions.lang === "ko_KR" || mergedOptions.lang === "zh_CN")) {
-            console.error("options.lang error, see https://hacpai.com/article/1549638745630#options");
+            throw new Error("options.lang error, see https://hacpai.com/article/1549638745630#options");
             return;
         }
 
         this.vditor = {
-            cacheKey,
             currentMode: mergedOptions.mode,
             currentPreviewMode: mergedOptions.preview.mode,
-            el,
+            element: id,
             lute: undefined,
             options: mergedOptions,
-            originalInnerHTML: el.innerHTML,
+            originalInnerHTML: id.innerHTML,
             tip: new Tip(),
         };
 
@@ -228,34 +216,21 @@ class Vditor extends VditorMethod {
 
     /** 清除缓存 */
     public clearCache() {
-        if (typeof this.vditor.cacheKey !== "string") {
-            return;
-        }
-        localStorage.removeItem(this.vditor.cacheKey);
+        localStorage.removeItem(this.vditor.options.cache.id);
     }
 
     /** 禁用缓存 */
     public disabledCache() {
-        this.vditor.cacheKey = undefined;
+        this.vditor.options.cache.enable = false;
     }
 
-    /** 启用缓存
-     * @param key 缓存 key，默认和初始化时相同。
-     */
-    public enableCache(key?: string) {
-        if (typeof key === "string") {
-            this.vditor.cacheKey = key;
-            return;
-        }
-        if (this.vditor.cacheKey) {
-            return;
-        }
-
-        if (this.vditor.el.id) {
-            this.vditor.cacheKey = `vditor${this.vditor.el.id}`;
+    /** 启用缓存 */
+    public enableCache() {
+        if (!this.vditor.options.cache.id) {
+            throw new Error("need options.cache.id, see https://hacpai.com/article/1549638745630#options");
             return;
         }
-        throw new Error("Missing cache key.");
+        this.vditor.options.cache.enable = true;
     }
 
     /** HTML 转 md */
@@ -349,7 +324,7 @@ class Vditor extends VditorMethod {
         }
 
         if (!markdown) {
-            this.clearCache()
+            this.clearCache();
         }
     }
 }

src/ts/ir/process.ts

@@ -51,8 +51,8 @@ export const processAfterRender = (vditor: IVditor, options = {
             vditor.counter.render(text.length, vditor.options.counter);
         }
 
-        if (vditor.cacheKey) {
-            localStorage.setItem(vditor.cacheKey, text);
+        if (vditor.options.cache.enable) {
+            localStorage.setItem(vditor.options.cache.id, text);
         }
 
         if (vditor.devtools) {

src/ts/resize/index.ts

@@ -16,8 +16,8 @@ export class Resize {
 
             const documentSelf = document;
             const y = event.clientY;
-            const height = vditor.el.offsetHeight;
-            const minHeight = 63 + vditor.el.querySelector(".vditor-toolbar").clientHeight;
+            const height = vditor.element.offsetHeight;
+            const minHeight = 63 + vditor.element.querySelector(".vditor-toolbar").clientHeight;
             documentSelf.ondragstart = () => false;
 
             if (window.captureEvents) {
@@ -28,9 +28,9 @@ export class Resize {
 
             documentSelf.onmousemove = (moveEvent: MouseEvent) => {
                 if (vditor.options.resize.position === "top") {
-                    vditor.el.style.height = Math.max(minHeight, height + (y - moveEvent.clientY)) + "px";
+                    vditor.element.style.height = Math.max(minHeight, height + (y - moveEvent.clientY)) + "px";
                 } else {
-                    vditor.el.style.height = Math.max(minHeight, height + (moveEvent.clientY - y)) + "px";
+                    vditor.element.style.height = Math.max(minHeight, height + (moveEvent.clientY - y)) + "px";
                 }
                 if (vditor.options.typewriterMode) {
                     vditor.sv.element.style.paddingBottom =
@@ -40,7 +40,7 @@ export class Resize {
 
             documentSelf.onmouseup = () => {
                 if (vditor.options.resize.after) {
-                    vditor.options.resize.after(vditor.el.offsetHeight - height);
+                    vditor.options.resize.after(vditor.element.offsetHeight - height);
                 }
 
                 if (window.captureEvents) {

src/ts/sv/inputEvent.ts

@@ -14,8 +14,8 @@ export const inputEvent = (vditor: IVditor, options = {
     if (vditor.hint && options.enableHint) {
         vditor.hint.render(vditor);
     }
-    if (vditor.cacheKey) {
-        localStorage.setItem(vditor.cacheKey, getMarkdown(vditor));
+    if (vditor.options.cache.enable) {
+        localStorage.setItem(vditor.options.cache.id, getMarkdown(vditor));
     }
     if (vditor.preview) {
         vditor.preview.render(vditor);

src/ts/toolbar/Fullscreen.ts

@@ -13,9 +13,9 @@ export class Fullscreen extends MenuItem {
     public _bindEvent(vditor: IVditor, menuItem: IMenuItem) {
         this.element.children[0].addEventListener(getEventName(), function(event) {
             event.preventDefault();
-            if (vditor.el.className.indexOf("vditor--fullscreen") > -1) {
+            if (vditor.element.className.indexOf("vditor--fullscreen") > -1) {
                 this.innerHTML = menuItem.icon || fullscreenSVG;
-                vditor.el.classList.remove("vditor--fullscreen");
+                vditor.element.classList.remove("vditor--fullscreen");
                 Object.keys(vditor.toolbar.elements).forEach((key) => {
                     const svgElement = vditor.toolbar.elements[key].firstChild as HTMLElement;
                     if (svgElement) {
@@ -24,7 +24,7 @@ export class Fullscreen extends MenuItem {
                 });
             } else {
                 this.innerHTML = menuItem.icon || contractSVG;
-                vditor.el.classList.add("vditor--fullscreen");
+                vditor.element.classList.add("vditor--fullscreen");
                 Object.keys(vditor.toolbar.elements).forEach((key) => {
                     const svgElement = vditor.toolbar.elements[key].firstChild as HTMLElement;
                     if (svgElement) {
@@ -38,7 +38,7 @@ export class Fullscreen extends MenuItem {
             }
 
             if (menuItem.click) {
-                menuItem.click(vditor.el.classList.contains("vditor--fullscreen"));
+                menuItem.click(vditor.element.classList.contains("vditor--fullscreen"));
             }
         });
     }

src/ts/ui/initUI.ts

@@ -6,19 +6,19 @@ import {renderDomByMd} from "../wysiwyg/renderDomByMd";
 import {setTheme} from "./setTheme";
 
 export const initUI = (vditor: IVditor) => {
-    vditor.el.innerHTML = "";
-    vditor.el.classList.add("vditor");
+    vditor.element.innerHTML = "";
+    vditor.element.classList.add("vditor");
     setTheme(vditor);
     if (typeof vditor.options.height === "number") {
-        vditor.el.style.height = vditor.options.height + "px";
+        vditor.element.style.height = vditor.options.height + "px";
     }
     if (typeof vditor.options.width === "number") {
-        vditor.el.style.width = vditor.options.width + "px";
+        vditor.element.style.width = vditor.options.width + "px";
     } else {
-        vditor.el.style.width = vditor.options.width;
+        vditor.element.style.width = vditor.options.width;
     }
 
-    vditor.el.appendChild(vditor.toolbar.element);
+    vditor.element.appendChild(vditor.toolbar.element);
 
     const contentElement = document.createElement("div");
     contentElement.className = "vditor-content";
@@ -55,7 +55,7 @@ export const initUI = (vditor: IVditor) => {
 
     contentElement.appendChild(vditor.tip.element);
 
-    vditor.el.appendChild(contentElement);
+    vditor.element.appendChild(contentElement);
 
     afterRender(vditor, contentElement);
 
@@ -94,16 +94,13 @@ const afterRender = (vditor: IVditor, contentElement: HTMLElement) => {
     });
 
     // set default value
-    let initValue =
-        typeof vditor.cacheKey === "string"
-            ? localStorage.getItem(vditor.cacheKey)
-            : "";
-    if (!vditor.cacheKey || !initValue) {
+    let initValue = localStorage.getItem(vditor.options.cache.id);
+    if (!vditor.options.cache.enable || !initValue) {
         if (vditor.options.value) {
             initValue = vditor.options.value;
         } else if (vditor.originalInnerHTML) {
             initValue = html2md(vditor, vditor.originalInnerHTML);
-        } else if (!vditor.cacheKey) {
+        } else if (!vditor.options.cache.enable) {
             initValue = "";
         }
     }

src/ts/ui/setTheme.ts

@@ -1,13 +1,13 @@
 export const setTheme = (vditor: IVditor) => {
     if (vditor.options.theme === "dark") {
-        vditor.el.classList.add("vditor--dark");
+        vditor.element.classList.add("vditor--dark");
         if (vditor.preview) {
             vditor.preview.element.firstElementChild.classList.add("vditor-reset--dark");
         }
         vditor.wysiwyg.element.classList.add("vditor-reset--dark");
         vditor.ir.element.classList.add("vditor-reset--dark");
     } else {
-        vditor.el.classList.remove("vditor--dark");
+        vditor.element.classList.remove("vditor--dark");
         if (vditor.preview) {
             vditor.preview.element.firstElementChild.classList.remove("vditor-reset--dark");
         }

src/ts/util/Options.ts

@@ -4,7 +4,9 @@ export class Options {
     public options: IOptions;
     private defaultOptions: IOptions = {
         after: undefined,
-        cache: true,
+        cache: {
+            enable: true,
+        },
         cdn: `https://cdn.jsdelivr.net/npm/vditor@${VDITOR_VERSION}`,
         classes: {
             preview: "",
@@ -233,6 +235,13 @@ export class Options {
                 this.options.upload = Object.assign({}, this.defaultOptions.upload, this.options.upload);
             }
 
+            if (this.options.cache) {
+                this.options.cache = Object.assign({}, this.defaultOptions.cache, this.options.cache);
+                if (this.options.cache && !this.options.cache.id) {
+                    throw new Error("need options.cache.id, see https://hacpai.com/article/1549638745630#options");
+                }
+            }
+
             if (this.options.classes) {
                 this.options.classes = Object.assign({}, this.defaultOptions.classes, this.options.classes);
             }

src/ts/wysiwyg/afterRenderEvent.ts

@@ -24,8 +24,8 @@ export const afterRenderEvent = (vditor: IVditor, options = {
             vditor.counter.render(text.length, vditor.options.counter);
         }
 
-        if (vditor.cacheKey) {
-            localStorage.setItem(vditor.cacheKey, text);
+        if (vditor.options.cache.enable) {
+            localStorage.setItem(vditor.options.cache.id, text);
         }
 
         if (vditor.devtools) {

types/index.d.ts

@@ -303,22 +303,11 @@ interface IOptions {
     resize?: IResize;
     /** 计数器。默认值: '0' */
     counter?: number;
-    /** 
-     * 是否使用 localStorage 进行缓存。
-     * 
-     * 为 string 时使用传入值作为 key 。
-     * 
-     * 使用元素 id 初始化时:
-     *    true:  启用，`vditor${id}` 作为 key。
-     *    false: 禁用。
-     *    默认: true
-     * 
-     * 使用元素初始化时:
-     *    true:  报错，必须使用 string。
-     *    false: 禁用。
-     *    默认: false
-     */
-    cache?: boolean | string;
+    /** 是否使用 localStorage 进行缓存。默认值: {enable: true} */
+    cache?: {
+        id?: string;
+        enable?: boolean;
+    };
     /** 编辑模式。默认值: 'wysiwyg' */
     mode?: "wysiwyg" | "sv" | "ir";
     /** @link https://hacpai.com/article/1549638745630#options-preview */
@@ -363,9 +352,8 @@ interface IEChart {
 }
 
 interface IVditor {
-    el: HTMLElement;
-    cacheKey?: string;
-    options: Omit<IOptions, "cache">;
+    element: HTMLElement;
+    options: IOptions;
     originalInnerHTML: string;
     lute: ILute;
     currentMode: "sv" | "wysiwyg" | "ir";