添加标题自动编号功能

src/assets/default-content.md

@@ -2,30 +2,57 @@
 
 关于本工具的介绍请看[这篇公众号文章](https://mp.weixin.qq.com/s/pn0LzyfgUj6rGUfVHUksjg)。
 
-
 ## 一级标题
 
 这是一级标题
 
+### 二级标题 1
+
+上面是二级标题
+
+### 二级标题 2
+
+上面是二级标题
+
+#### 三级标题
+
+上面是三级标题
+
+### 二级标题 2
+
+上面是二级标题
+
+#### 三级标题
+
+上面是三级标题
+##### 三级标题
+
+上面是三级标题
+
+## 一级标题
+
+这是一级标题
 
 ### 二级标题
 
 上面是二级标题
 
+#### 三级标题
+
+上面是三级标题
+
 ## 文字样式
 
 ### 基本样式
 
 你好，我是一个来自地球的人。
 
-我是一个[智人](https://zh.wikipedia.org/wiki/智人 "学名：Homo sapiens，意为“有智慧的人”")，
-我喜欢穿新衣服，都是**黑衣服**。
+我是一个[智人](https://zh.wikipedia.org/wiki/智人 '学名：Homo sapiens，意为“有智慧的人”')，我喜欢穿新衣服，都是**黑衣服**。
 
 我最大的*爱好*是拆汽车，我拆了很多汽车，宝马、奔驰、劳斯莱斯和特斯拉，但是都没装回去。
 
 上面表现了链接和加重两种样式，公众号以外的链接会被转换为脚注。
 
-
 ### 注音符号
 
 [注音符号 W3C 定义](http://www.w3.org/TR/ruby/)。支持日语注音假名，小夜時雨【さ・よ・しぐれ】 和 汉语拼音 上海【Shàng・hǎi】
@@ -52,10 +79,9 @@
 
 食べる{たべる}\n\n english【英文】 will not translated{fan yi}'
 
-
 ## 段落、列表、引用
 
-[Markdown](https://sspai.com/post/25137 "认识与入门 Markdown") 是一种写文章用的语法。
+[Markdown](https://sspai.com/post/25137 '认识与入门 Markdown') 是一种写文章用的语法。
 
 我们日常写文章用的工具，比如说 Word，提供了大量排版格式样式相关的选项。
 
@@ -87,13 +113,10 @@
 
 代码块，使用微信官方的高亮配色，在代码块标示语言即可。粘贴到公众号后，需要用鼠标点一下代码块，完成高亮。
 
-
     ```cpp
     你的代码
     ```
 
-
-
 ```cpp
 #include <stdio.h>
 
@@ -125,8 +148,7 @@ int main() {
 接下来是表格示例：
 
 | Header 1 | Header 2 |
-| --- | --- |
-| Key 1 | Value 1 |
-| Key 2 | Value 2 |
-| Key 3 | Value 3 |
-
+| -------- | -------- |
+| Key 1    | Value 1  |
+| Key 2    | Value 2  |
+| Key 3    | Value 3  |

src/assets/scripts/editor.js

@@ -1,124 +1,120 @@
 var app = new Vue({
   el: '#app',
-  data: function () {
+  data: function() {
     return {
       title: 'WeChat Format',
       aboutOutput: '',
       output: '',
       source: '',
-      editorThemes: [
-        { label: 'base16-light', value: 'base16-light' },
-        { label: 'duotone-light', value: 'duotone-light' },
-        { label: 'monokai', value: 'monokai' }
-      ],
+      editorThemes: [{ label: 'base16-light', value: 'base16-light' }, { label: 'duotone-light', value: 'duotone-light' }, { label: 'monokai', value: 'monokai' }],
       currentEditorTheme: 'base16-light',
       editor: null,
-      builtinFonts: [
-        { label: '衬线', value: "Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif"},
-        { label: '无衬线', value: "Roboto, Oxygen, Ubuntu, Cantarell, PingFangSC-light, PingFangTC-light, 'Open Sans', 'Helvetica Neue', sans-serif"}
-      ],
+      builtinFonts: [{ label: '衬线', value: "Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif" }, { label: '无衬线', value: "Roboto, Oxygen, Ubuntu, Cantarell, PingFangSC-light, PingFangTC-light, 'Open Sans', 'Helvetica Neue', sans-serif" }],
       currentFont: "Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif",
       currentSize: '16px',
-      sizeOption: [
-        { label: '16px', value: '16px', desc: '默认' },
-        { label: '17px', value: '17px', desc: '正常' },
-        { label: '18px', value: '18px', desc: '稍大' }
-      ],
+      sizeOption: [{ label: '16px', value: '16px', desc: '默认' }, { label: '17px', value: '17px', desc: '正常' }, { label: '18px', value: '18px', desc: '稍大' }],
       currentTheme: 'default',
-      themeOption: [
-        { label: 'default', value: 'default', author: 'Lyric'},
-        { label: 'lupeng', value: 'lupeng', author: '鲁鹏'}
-      ],
+      themeOption: [{ label: 'default', value: 'default', author: 'Lyric' }, { label: 'lupeng', value: 'lupeng', author: '鲁鹏' }],
       styleThemes: {
         default: defaultTheme,
         lupeng: lupengTheme
       },
-      aboutDialogVisible: false
-    }
+      aboutDialogVisible: false,
+      enableTitleNum: false
+    };
   },
-  mounted () {
-    var self = this
+  mounted() {
+    var self = this;
     this.editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
       lineNumbers: false,
       lineWrapping: true,
       styleActiveLine: true,
       theme: this.currentEditorTheme,
-      mode: 'text/x-markdown',
+      mode: 'text/x-markdown'
+    });
+    this.editor.on('change', function(cm, change) {
+      self.refresh();
     });
-    this.editor.on("change", function(cm, change) {
-      self.refresh()
-    })
     // this.currentFont = this.builtinFonts[0],
     this.wxRenderer = new WxRenderer({
       theme: this.styleThemes.default,
       fonts: this.currentFont,
       size: this.currentSize
-    })
+    });
     axios({
       method: 'get',
-      url: './assets/default-content.md',
-    }).then(function (resp) {
-      self.editor.setValue(resp.data)
-    })
+      url: './assets/default-content.md'
+    }).then(function(resp) {
+      self.editor.setValue(resp.data);
+    });
   },
   methods: {
-    renderWeChat: function (source) {
-      var output = marked(source, { renderer: this.wxRenderer.getRenderer() })
+    renderWeChat: function(source) {
+      var output = marked(source, { renderer: this.wxRenderer.getRenderer() });
       if (this.wxRenderer.hasFootnotes()) {
-        output += this.wxRenderer.buildFootnotes()
+        output += this.wxRenderer.buildFootnotes();
       }
-      return output
+      return output;
     },
-    editorThemeChanged: function (editorTheme) {
-      this.editor.setOption('theme', editorTheme)
+    editorThemeChanged: function(editorTheme) {
+      this.editor.setOption('theme', editorTheme);
     },
-    fontChanged: function (fonts) {
+    fontChanged: function(fonts) {
       this.wxRenderer.setOptions({
         fonts: fonts
-      })
-      this.refresh()
+      });
+      this.refresh();
     },
-    sizeChanged: function(size){
+    sizeChanged: function(size) {
       this.wxRenderer.setOptions({
         size: size
-      })
-      this.refresh()
+      });
+      this.refresh();
     },
-    themeChanged: function(themeName){
+    themeChanged: function(themeName) {
       var themeName = themeName;
       var themeObject = this.styleThemes[themeName];
       this.wxRenderer.setOptions({
         theme: themeObject
-      })
-      this.refresh()
+      });
+      this.refresh();
+    },
+    titleNumChanged: function(val) {
+      this.wxRenderer.setOptions({
+        enabletitleNum: val
+      });
+      this.refresh();
     },
-    refresh: function () {
-      this.output = this.renderWeChat(this.editor.getValue())
+    refresh: function() {
+      this.output = this.renderWeChat(this.editor.getValue());
     },
-    copy: function () {
-      var clipboardDiv = document.getElementById('output')
+    copy: function() {
+      var clipboardDiv = document.getElementById('output');
       clipboardDiv.focus();
-      window.getSelection().removeAllRanges();  
-      var range = document.createRange(); 
+      window.getSelection().removeAllRanges();
+      var range = document.createRange();
       range.setStartBefore(clipboardDiv.firstChild);
       range.setEndAfter(clipboardDiv.lastChild);
-      window.getSelection().addRange(range);  
+      window.getSelection().addRange(range);
 
       try {
         if (document.execCommand('copy')) {
           this.$message({
-            message: '已复制到剪贴板', type: 'success'
-          })
+            message: '已复制到剪贴板',
+            type: 'success'
+          });
         } else {
           this.$message({
-            message: '未能复制到剪贴板，请全选后右键复制', type: 'warning'
-          })
+            message: '未能复制到剪贴板，请全选后右键复制',
+            type: 'warning'
+          });
         }
       } catch (err) {
         this.$message({
-          message: '未能复制到剪贴板，请全选后右键复制', type: 'warning'
-        })
+          message: '未能复制到剪贴板，请全选后右键复制',
+          type: 'warning'
+        });
       }
     }
   }
-})
+});