:sparkles: fix #297

CHANGELOG.md

@@ -59,6 +59,7 @@
 
 ### v3.1.4 / 2020-04-0x
 
+* [297](https://github.com/Vanessa219/vditor/issues/297) 纯文本字数统计 `引入特性`
 * [298](https://github.com/Vanessa219/vditor/pull/298) ✨ 允许开启 counter 而不设置限值 & README 优化 `引入特性`
 * [295](https://github.com/Vanessa219/vditor/issues/295) 全屏模式下打字机行为异常 `修复缺陷`
 * [294](https://github.com/Vanessa219/vditor/pull/294) 🐛 计算全屏 typewriterMode 位置 `修复缺陷`
@@ -76,7 +77,8 @@
 * [278](https://github.com/Vanessa219/vditor/issues/278) IR 细节修改 `修复缺陷`
 * 文档更新
   * 添加 `options.minHeight`
-  * 为 toolbar 添加 outdent，indent
+  * 为 `options.toolbar` 添加 outdent，indent
+  * `options.counter` 修改为 `counter?: { enable: boolean; max?: number; type: "md" | "text"; }`
 
 ### v3.0.12 / 2020-04-06
 

demo/index.js

@@ -13,7 +13,10 @@ window.vditor = new Vditor('vditor', {
       style: 'native',
     },
   },
-  counter: 100,
+  counter: {
+    enable: true,
+    max: 100,
+  },
   height: 500,
   hint: {
     emojiPath: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/images/emoji',

src/index.ts

@@ -75,7 +75,7 @@ class Vditor extends VditorMethod {
             tip: new Tip(),
         };
 
-        if (mergedOptions.counter !== false) {
+        if (mergedOptions.counter.enable) {
             this.vditor.counter = new Counter(this.vditor);
         }
 

src/ts/counter/index.ts

@@ -5,21 +5,28 @@ export class Counter {
         this.element = document.createElement("div");
         this.element.className = "vditor-counter";
 
-        this.render("", vditor.options.counter);
+        this.render(vditor, "");
 
     }
 
-    public render(text: string, counter: number | boolean, type: string = "md") {
-        const length = text.endsWith("\n") ? text.length - 1 : text.length;
-        if (typeof counter === "number") {
-            if (length > counter) {
+    public render(vditor: IVditor, mdText: string) {
+        let length = mdText.endsWith("\n") ? mdText.length - 1 : mdText.length;
+        if (vditor.options.counter.type === "text" && vditor[vditor.currentMode]) {
+            const tempElement = vditor[vditor.currentMode].element.cloneNode(true) as HTMLElement;
+            tempElement.querySelectorAll(".vditor-wysiwyg__preview").forEach((item) => {
+                item.remove();
+            });
+            length = tempElement.textContent.length;
+        }
+        if (typeof vditor.options.counter.max === "number") {
+            if (length > vditor.options.counter.max) {
                 this.element.className = "vditor-counter vditor-counter--error";
             } else {
                 this.element.className = "vditor-counter";
             }
-            this.element.innerHTML = `${type} ${length}/${counter}`;
+            this.element.innerHTML = `${vditor.options.counter.type} ${length}/${vditor.options.counter.max}`;
         } else {
-            this.element.innerHTML = `${type} ${length}`;
+            this.element.innerHTML = `${vditor.options.counter.type} ${length}`;
         }
     }
 }

src/ts/ir/process.ts

@@ -53,8 +53,8 @@ export const processAfterRender = (vditor: IVditor, options = {
             vditor.options.input(text);
         }
 
-        if (vditor.options.counter !== false) {
-            vditor.counter.render(text, vditor.options.counter);
+        if (vditor.options.counter.enable) {
+            vditor.counter.render(vditor, text);
         }
 
         if (vditor.options.cache.enable) {

src/ts/sv/inputEvent.ts

@@ -4,18 +4,18 @@ export const inputEvent = (vditor: IVditor, options = {
     enableHint: false,
     enableInput: true,
 }) => {
-    if (vditor.options.counter !== false) {
-        vditor.counter.render(getMarkdown(vditor), vditor.options.counter);
+    const text = getMarkdown(vditor);
+    if (vditor.options.counter.enable) {
+        vditor.counter.render(vditor, text);
     }
     if (typeof vditor.options.input === "function" && options.enableInput) {
-        vditor.options.input(getMarkdown(vditor),
-            vditor.preview && vditor.preview.element);
+        vditor.options.input(text, vditor.preview && vditor.preview.element);
     }
     if (options.enableHint) {
         vditor.hint.render(vditor);
     }
     if (vditor.options.cache.enable) {
-        localStorage.setItem(vditor.options.cache.id, getMarkdown(vditor));
+        localStorage.setItem(vditor.options.cache.id, text);
     }
     if (vditor.preview) {
         vditor.preview.render(vditor);

src/ts/ui/initUI.ts

@@ -37,7 +37,7 @@ export const initUI = (vditor: IVditor) => {
         contentElement.appendChild(vditor.devtools.element);
     }
 
-    if (vditor.options.counter !== false) {
+    if (vditor.options.counter.enable) {
         contentElement.appendChild(vditor.counter.element);
     }
 

src/ts/util/Options.ts

@@ -11,7 +11,10 @@ export class Options {
         classes: {
             preview: "",
         },
-        counter: false,
+        counter: {
+            enable: false,
+            type: "md",
+        },
         debugger: false,
         height: "auto",
         hideToolbar: false,
@@ -280,6 +283,10 @@ export class Options {
             if (this.options.resize) {
                 this.options.resize = Object.assign({}, this.defaultOptions.resize, this.options.resize);
             }
+
+            if (this.options.counter) {
+                this.options.counter = Object.assign({}, this.defaultOptions.counter, this.options.counter);
+            }
         }
 
         const mergedOptions = Object.assign({}, this.defaultOptions, this.options);

src/ts/wysiwyg/afterRenderEvent.ts

@@ -20,8 +20,8 @@ export const afterRenderEvent = (vditor: IVditor, options = {
             vditor.options.input(text);
         }
 
-        if (vditor.options.counter !== false) {
-            vditor.counter.render(text, vditor.options.counter);
+        if (vditor.options.counter.enable) {
+            vditor.counter.render(vditor, text);
         }
 
         if (vditor.options.cache.enable) {

types/index.d.ts

@@ -321,8 +321,12 @@ interface IOptions {
     /** @link https://hacpai.com/article/1549638745630#options-toolbar */
     toolbar?: Array<string | IMenuItem>;
     resize?: IResize;
-    /** 计数器。默认值: false */
-    counter?: number | boolean;
+    /** @link https://hacpai.com/article/1549638745630#options-counter */
+    counter?: {
+        enable: boolean;
+        max?: number;
+        type: "md" | "text";
+    };
     /** @link https://hacpai.com/article/1549638745630#options-cache */
     cache?: {
         id?: string;
@@ -398,7 +402,7 @@ interface IVditor {
     };
     counter?: {
         element: HTMLElement
-        render(text: string, counter: number | boolean, type?: string): void,
+        render(vditor: IVditor, mdText?: string): void,
     };
     resize?: {
         element: HTMLElement,