refine

src/components/MarkdownEditor/index.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class='simplemde-container' :style="{height:height+'px',zIndex:zIndex}">
+    <textarea :id='id'>
+    </textarea>
+  </div>
+</template>
+
+<script>
+import 'simplemde/dist/simplemde.min.css'
+import SimpleMDE from 'simplemde'
+
+export default {
+  name: 'simplemde-md',
+  props: {
+    value: String,
+    id: {
+      type: String,
+      default: 'markdown-editor'
+    },
+    autofocus: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    height: {
+      type: Number,
+      default: 150
+    },
+    zIndex: {
+      type: Number,
+      default: 10
+    },
+    toolbar: {
+      type: Array
+    }
+  },
+  data() {
+    return {
+      simplemde: null,
+      hasChange: false
+    }
+  },
+  watch: {
+    value(val) {
+      if (val === this.simplemde.value() && !this.hasChange) return
+      this.simplemde.value(val)
+    }
+  },
+  mounted() {
+    this.simplemde = new SimpleMDE({
+      element: document.getElementById(this.id),
+      autofocus: this.autofocus,
+      toolbar: this.toolbar,
+      spellChecker: false,
+      insertTexts: {
+        link: ['[', ']( )']
+      },
+      // hideIcons: ['guide', 'heading', 'quote', 'image', 'preview', 'side-by-side', 'fullscreen'],
+      placeholder: this.placeholder
+    })
+    if (this.value) {
+      this.simplemde.value(this.value)
+    }
+    this.simplemde.codemirror.on('change', () => {
+      if (this.hasChange) {
+        this.hasChange = true
+      }
+      this.$emit('input', this.simplemde.value())
+    })
+  },
+  destroyed() {
+    this.simplemde = null
+  }
+}
+</script>
+
+<style>
+.simplemde-container .CodeMirror {
+  /*height: 150px;*/
+  min-height: 150px;
+}
+
+.simplemde-container .CodeMirror-scroll {
+  min-height: 150px;
+}
+
+.simplemde-container .CodeMirror-code {
+  padding-bottom: 40px;
+}
+
+.simplemde-container .editor-statusbar {
+  display: none;
+}
+
+.simplemde-container .CodeMirror .CodeMirror-code .cm-link {
+  color: #1482F0;
+}
+
+.simplemde-container .CodeMirror .CodeMirror-code .cm-string.cm-url {
+  color: #2d3b4d;
+  font-weight: bold;
+}
+
+.simplemde-container .CodeMirror .CodeMirror-code .cm-formatting-link-string.cm-url {
+  padding: 0 2px;
+  font-weight: bold;
+  color: #E61E1E;
+}
+</style>
+
+