feat:添加回显和tools配置

dist/index.html

@@ -13,12 +13,26 @@
     <script>
       new MdEditor({
         el: "#app", // required
+        value: "",
         themeOptions: {
           borderColor: "#dbdbdb",
           borderColorActive: "#409eff",
           textColor: "#303030",
           textColorActive: "#000"
         },
+        toolsOptions: {
+          bold: true,
+          italic: true,
+          quote: true,
+          code: true,
+          link: true,
+          ul: true,
+          ol: true,
+          task: true,
+          table: true,
+          fullscreen: true
+        },
+        canPreview: true,
         canAttachFile: true,
         placeholder: "请输入内容",
         onChange: function(res) {

src/App.vue

@@ -5,9 +5,11 @@
       :selectionInfo.sync="selectionInfo"
       :showPreview.sync="showPreview"
       :isFocus.sync="isFocus"
+      :canPreview="canPreview"
+      :toolsOptions="toolsOptions"
       :fullScreen.sync="fullScreen"
     />
-    <markdownPreview :text="text" :html.sync="html" v-show="showPreview" />
+  <markdownPreview :text="text" :html.sync="html" v-show="showPreview" />
     <markdown-editor
       :selectionInfo.sync="selectionInfo"
       :text.sync="text"
@@ -47,6 +49,18 @@ export default {
     canAttachFile: {
       type: Boolean,
       default: true
+    },
+    value: {
+      type: [String, Number],
+      default: ""
+    },
+    canPreview: {
+      type: Boolean,
+      default: true
+    },
+    toolsOptions: {
+      type: Object,
+      default: () => {}
     }
   },
   data() {
@@ -56,45 +70,6 @@ export default {
       showPreview: false,
       fileList: [],
       text: "",
-//       text: `
-// # 标题一标题一标题一
-// ## 标题二标题二
-// 666\`行内代码\`666
-// \`\`\`js
-// // 是注释呀
-// /**
-// * @params x
-// */
-// function fn() {
-//   return null;
-// }
-// \`\`\`
-// **粗体文字**
-
-// _斜体文字_
-
-// > 这段是引用的内容\n
-// > 这段是引用的内容
-// > 这段是引用的内容
-
-// [链接](url)
-
-// - 无序列表
-// - 无序列表
-// - 无序列表
-
-// 1. 有序列表
-// 2. 有序列表
-// 3. 有序列表
-
-// - [ ] 任务列表
-// - [x] 任务列表
-// - [ ] 任务列表
-
-// | header | header |
-// | ------ | ------ |
-// | cell | cell |
-// | cell | cell |`,
       html: "",
       selectionInfo: {
         selectorId: "",
@@ -103,7 +78,6 @@ export default {
       }
     };
   },
-
   watch: {
     html: {
       immediate: true,
@@ -114,6 +88,12 @@ export default {
         });
       }
     },
+    value: {
+      immediate: true,
+      handler: function(val) {
+        this.text = val;
+      }
+    },
     fileList: {
       immediate: false,
       deep: true,

src/assets/js/utils.js

@@ -75,3 +75,7 @@ export function initStyle({
 export function isNotEmpty(val) {
   return val !== null && val !== undefined;
 }
+
+export function isNotFalse(val) {
+  return val !== false;
+}

src/components/content/md-preview.vue

@@ -12,7 +12,7 @@ export default {
   },
   props: {
     text: {
-      type: String,
+      type: [String, Number],
       default: ""
     },
     html: {
@@ -28,8 +28,9 @@ export default {
           return html;
         }
       });
-      if (!val.trim()) return;
-      const html = marked(val);
+      const str = val + "";
+      if (!str.trim()) return;
+      const html = marked(str);
       this.$emit("update:html", html);
     }
   },

src/components/content/md-textarea.vue

@@ -36,15 +36,15 @@ export default {
     },
     fileList: {
       type: Array,
-      default: ()=>[]
+      default: () => []
     },
     text: {
-      type: String,
-      default: ''
+      type: [String, Number],
+      default: ""
     },
     selectionInfo: {
       type: Object,
-      default: ()=>{}
+      default: () => {}
     }
   },
   data() {
@@ -67,24 +67,23 @@ export default {
   beforeDestroy() {
     document.removeEventListener("mouseup", this.checkSelection);
   },
-  
+
   methods: {
-   
     setFocus(val) {
-      this.$emit('update:isFocus', val)
+      this.$emit("update:isFocus", val);
     },
     checkSelection() {
       const info = getSelectionInfo(this.id);
       if (!info) {
         const cursorPoint = getPosition(this.id);
-        this.$emit('update:selectionInfo',{
+        this.$emit("update:selectionInfo", {
           selectorId: this.id,
           selectionStart: cursorPoint,
           selectionEnd: cursorPoint
-        })
+        });
         return;
       }
-      this.$emit('update:selectionInfo',info)
+      this.$emit("update:selectionInfo", info);
     },
     pasteFile(event) {
       let fileList = [];
@@ -96,7 +95,7 @@ export default {
         }
       }
       if (!fileList.length) return;
-      this.$emit('update:fileList', fileList)
+      this.$emit("update:fileList", fileList);
     }
   }
 };

src/components/header/md-header.vue

@@ -2,12 +2,13 @@
   <div :class="['md_header', { active: isFocus }]">
     <div class="header_tabs">
       <div
-        :class="['tab_item', { active: !showPreview }]"
+        :class="['tab_item', { active: canPreview && !showPreview }]"
         @click="setShowPreview(false)"
       >
         编辑
       </div>
       <div
+        v-if="canPreview"
         :class="['tab_item', { active: showPreview }]"
         @click="setShowPreview(true)"
       >
@@ -20,7 +21,7 @@
         :fullScreen="fullScreen"
         @setFullScreen="$emit('update:fullScreen', true)"
         @updateText="updateText"
-        v-for="(item, index) in toolButtonList"
+        v-for="(item, index) in toolsShow"
         :key="index"
         :text="text"
         :selectionInfo="selectionInfo"
@@ -29,6 +30,7 @@
   </div>
 </template>
 <script>
+import { isNotFalse } from "@/assets/js/utils";
 import toolButton from "./tool-button";
 export default {
   components: { toolButton },
@@ -45,8 +47,16 @@ export default {
       type: Boolean,
       default: false
     },
+    canPreview: {
+      type: Boolean,
+      default: true
+    },
+    toolsOptions: {
+      type: Object,
+      default: () => {}
+    },
     text: {
-      type: String,
+      type: [String, Number],
       default: ""
     },
     selectionInfo: {
@@ -54,6 +64,16 @@ export default {
       default: () => {}
     }
   },
+  computed: {
+    toolsShow() {
+      const toolsList = this.toolButtonList;
+      const toolsOptions = this.toolsOptions;
+      if (!toolsOptions) return toolsList;
+      return toolsList.filter(item => {
+        return isNotFalse(toolsOptions[item.name]);
+      });
+    }
+  },
   data() {
     return {
       toolButtonList: [

src/components/header/tool-button.vue

@@ -20,22 +20,22 @@ export default {
       default: false
     },
     text: {
-      type: String,
-      default: ''
+      type: [String, Number],
+      default: ""
     },
     selectionInfo: {
       type: Object,
-      default: ()=>{}
+      default: () => {}
     },
     uploadPath: {
       type: String,
-      default: ''
+      default: ""
     }
   },
   data() {
     return {
       ulNum: 1
-    }
+    };
   },
   methods: {
     handleTool(type, startStr, endStr) {
@@ -53,21 +53,21 @@ export default {
         case "ol":
           let ulNum = this.ulNum;
           this.updateText(`\n${ulNum}. `, "");
-          this.ulNum++
+          this.ulNum++;
           break;
         case "fullScreen":
-          this.$emit('setFullScreen', true)
+          this.$emit("setFullScreen", true);
           break;
         default:
           break;
       }
     },
     updateText(startStr, endStr) {
-      const originalText = this.text
-      const selectionInfo = this.selectionInfo
-     const newText = formatText(originalText, selectionInfo, startStr, endStr)
-      this.$emit('updateText',newText)
-   }
+      const originalText = this.text;
+      const selectionInfo = this.selectionInfo;
+      const newText = formatText(originalText, selectionInfo, startStr, endStr);
+      this.$emit("updateText", newText);
+    }
   }
 };
 </script>

src/main.js

@@ -13,8 +13,11 @@ function initMdEditor(obj) {
     onChange,
     onUpload,
     placeholder,
+    value,
+    canPreview,
     canAttachFile,
-    themeOptions
+    themeOptions,
+    toolsOptions
   } = obj;
   if (!el || !document.querySelector(el)) throw new Error("请指定容器");
   if (isNotEmpty(themeOptions)) initStyle(themeOptions);
@@ -34,6 +37,9 @@ function initMdEditor(obj) {
         },
         props: {
           canAttachFile,
+          value,
+          canPreview,
+          toolsOptions,
           placeholder
         }
       })