🎨 fix #296

CHANGELOG.md

@@ -59,6 +59,7 @@
 
 ### v3.1.5 / 2020-04-0x
 
+* [296](https://github.com/Vanessa219/vditor/issues/296) 打字机模式下字数统计标签不可见 `改进功能`
 * [302](https://github.com/Vanessa219/vditor/issues/302) Editing Heading(IR mode) `修复缺陷`
 * [301](https://github.com/Vanessa219/vditor/issues/301) Add README in English `文档相关`
 
@@ -83,6 +84,7 @@
   * 添加 `options.minHeight`
   * 为 `options.toolbar` 添加 outdent，indent
   * `options.counter` 修改为 `counter?: { enable: boolean; max?: number; type: "md" | "text"; }`
+  * counter 位置移动到 toolbar 上
 
 ### v3.0.12 / 2020-04-06
 

src/assets/scss/_content.scss

@@ -109,15 +109,14 @@
   }
 
   &-counter {
-    padding: 0 3px;
-    position: absolute;
-    bottom: 10px;
-    right: 20px;
+    padding: 3px;
     color: var(--toolbar-icon-color);
     background-color: var(--code-background-color);
     border-radius: 3px;
     font-size: 12px;
     user-select: none;
+    float: right;
+    margin: 8px 3px 0 0;
 
     &--error {
       color: $errorColor;

src/index.ts

@@ -1,6 +1,5 @@
 import VditorMethod from "./method";
 import {VDITOR_VERSION} from "./ts/constants";
-import {Counter} from "./ts/counter/index";
 import {DevTools} from "./ts/devtools";
 import {Hint} from "./ts/hint/index";
 import {IR} from "./ts/ir";
@@ -75,10 +74,6 @@ class Vditor extends VditorMethod {
             tip: new Tip(),
         };
 
-        if (mergedOptions.counter.enable) {
-            this.vditor.counter = new Counter(this.vditor);
-        }
-
         this.vditor.sv = new Editor(this.vditor);
         this.vditor.undo = new Undo();
         this.vditor.wysiwyg = new WYSIWYG(this.vditor);

src/ts/counter/index.ts → src/ts/toolbar/Counter.ts

@@ -2,7 +2,7 @@ export class Counter {
     public element: HTMLElement;
 
     constructor(vditor: IVditor) {
-        this.element = document.createElement("div");
+        this.element = document.createElement("span");
         this.element.className = "vditor-counter";
 
         this.render(vditor, "");

src/ts/toolbar/index.ts

@@ -29,6 +29,7 @@ import {Strike} from "./Strike";
 import {Table} from "./Table";
 import {Undo} from "./Undo";
 import {Upload} from "./Upload";
+import {Counter} from "./Counter";
 
 export class Toolbar {
     public elements: { [key: string]: HTMLElement };
@@ -162,5 +163,10 @@ export class Toolbar {
         if (vditor.options.hideToolbar) {
             this.element.classList.add("vditor-toolbar--hide");
         }
+
+        if (vditor.options.counter.enable) {
+            vditor.counter = new Counter(vditor);
+            this.element.appendChild(vditor.counter.element);
+        }
     }
 }

src/ts/ui/initUI.ts

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