feat: add switch for footnotes

添加脚注开关

assets/scripts/editor.js

@@ -37,6 +37,7 @@ let app = new Vue({
     d.currentFont = d.builtinFonts[0].value;
     d.currentSize = d.sizeOption[1].value;
     d.currentColor = d.colorOption[0].value;
+    d.status = '1';
     return d;
   },
   mounted() {
@@ -59,7 +60,8 @@ let app = new Vue({
     this.wxRenderer = new WxRenderer({
       theme: setColor(this.currentColor),
       fonts: this.currentFont,
-      size: this.currentSize
+      size: this.currentSize,
+      status: this.status
     });
     // 如果有编辑内容被保存则读取，否则加载默认文档
     if (localStorage.getItem("__editor_content")) {
@@ -70,10 +72,10 @@ let app = new Vue({
   },
   methods: {
     renderWeChat(source) {
-      let output = marked(source, { renderer: this.wxRenderer.getRenderer() });
-      if (this.wxRenderer.hasFootnotes()) {
+      let output = marked(source, { renderer: this.wxRenderer.getRenderer(this.status) });
       // 去除第一行的 margin-top
       output = output.replace(/(style=".*?)"/, '$1;margin-top: 0"');
+      if (this.status) {
         // 引用脚注
         output += this.wxRenderer.buildFootnotes();
         // 附加的一些 style
@@ -161,6 +163,9 @@ let app = new Vue({
         this.editor.focus();
       });
     },
+    statusChanged() {
+      this.refresh();
+    },
     // 将左侧编辑器内容保存到 LocalStorage
     saveEditorContent() {
       let content = this.editor.getValue(0);

assets/scripts/renderers/wx-renderer.js

@@ -1,6 +1,5 @@
 let WxRenderer = function (opts) {
   this.opts = opts;
-  let ENV_USE_REFERENCES = true;
   let ENV_STRETCH_IMAGE = true;
 
   let footnotes = [];
@@ -92,7 +91,7 @@ let WxRenderer = function (opts) {
 
   this.hasFootnotes = () => footnotes.length !== 0;
 
-  this.getRenderer = () => {
+  this.getRenderer = (status) => {
     footnotes = [];
     footnoteIndex = 0;
 
@@ -172,11 +171,11 @@ let WxRenderer = function (opts) {
       } else if (href === text) {
         return text;
       } else {
-        if (ENV_USE_REFERENCES) {
+        if (status) {
           let ref = addFootnote(title || text, href);
           return `<span ${getStyles('link')}>${text}<sup>[${ref}]</sup></span>`;
         } else {
-          return `<a href="${href}" title="${(title || text)}" ${getStyles('link')}>${text}</a>`;
+          return text;
         }
       }
     };

index.html

@@ -82,6 +82,15 @@
             </el-select>
           </el-form-item>
           <el-color-picker v-model="currentColor" size="mini" show-alpha @change="colorChanged"></el-color-picker>
+          &nbsp;&nbsp;
+          <el-tooltip content="微信外链自动转为文末引用" placement="top">
+            <el-switch
+              v-model="status"
+              active-color="#67c23a"
+              inactive-color="#dcdfe6"
+              @change="statusChanged">
+            </el-switch>
+          </el-tooltip>
         </el-form>
         <el-button type="success" plain size="medium" @click="copy">复制</el-button>
         <el-button type="success" plain size="medium" class="about" @click="aboutDialogVisible = true">关于</el-button>