增加markdown编辑器

package-lock.json

@@ -3407,6 +3407,14 @@
       "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.38.0.tgz",
       "integrity": "sha512-PEPnDg8U3DTGFB/Dn2T/INiRNC9CB5k2vLAQJidYCsHvAgtXbklqnuidEwx7yGrMrdGhl0L0P3iNKW9I07J6tQ=="
     },
+    "codemirror-spell-checker": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/codemirror-spell-checker/-/codemirror-spell-checker-1.1.2.tgz",
+      "integrity": "sha1-HGYPkIlIPMtRE7m6nKGcP0mTNx4=",
+      "requires": {
+        "typo-js": "1.0.3"
+      }
+    },
     "collection-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
@@ -9391,6 +9399,11 @@
         "object-visit": "1.0.1"
       }
     },
+    "marked": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-0.4.0.tgz",
+      "integrity": "sha512-tMsdNBgOsrUophCAFQl0XPe6Zqk/uy9gnue+jIIKhykO51hxyu6uNx7zBPy0+y/WKYVZZMspV9YeXLNdKk+iYw=="
+    },
     "math-expression-evaluator": {
       "version": "1.2.17",
       "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz",
@@ -13486,6 +13499,16 @@
       "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
       "dev": true
     },
+    "simplemde": {
+      "version": "1.11.2",
+      "resolved": "https://registry.npmjs.org/simplemde/-/simplemde-1.11.2.tgz",
+      "integrity": "sha1-ojo12XjSxA7wfewAjJLwcNjggOM=",
+      "requires": {
+        "codemirror": "5.38.0",
+        "codemirror-spell-checker": "1.1.2",
+        "marked": "0.4.0"
+      }
+    },
     "slash": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",
@@ -14438,6 +14461,11 @@
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
       "dev": true
     },
+    "typo-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typo-js/-/typo-js-1.0.3.tgz",
+      "integrity": "sha1-VNjrx5SfGngQkItgAsaEFSbJnVo="
+    },
     "uglify-js": {
       "version": "3.3.25",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.3.25.tgz",
@@ -14948,6 +14976,11 @@
         "browser-process-hrtime": "0.1.2"
       }
     },
+    "wangeditor": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/wangeditor/-/wangeditor-3.1.1.tgz",
+      "integrity": "sha1-+9PB1JdpI8nt67hbKdMLNVEq0Dk="
+    },
     "watchpack": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",

package.json

@@ -21,12 +21,14 @@
     "iview": "^2.14.1",
     "iview-area": "^1.5.17",
     "js-cookie": "^2.2.0",
+    "simplemde": "^1.11.2",
     "sortablejs": "^1.7.0",
     "tinymce": "^4.7.11",
     "vue": "^2.5.10",
     "vue-i18n": "^7.8.0",
     "vue-router": "^3.0.1",
-    "vuex": "^3.0.1"
+    "vuex": "^3.0.1",
+    "wangeditor": "^3.1.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.0.0-beta.10",

src/components/markdown/index.js

@@ -0,0 +1,2 @@
+import MarkdownEditor from './markdown.vue'
+export default MarkdownEditor

src/components/markdown/markdown.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="markdown-wrapper">
+    <textarea ref="editor"></textarea>
+  </div>
+</template>
+
+<script>
+import Simplemde from 'simplemde'
+import 'simplemde/dist/simplemde.min.css'
+export default {
+  naem: 'MarkdownEditor',
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    options: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    localCache: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data () {
+    return {
+      editor: null
+    }
+  },
+  methods: {
+    addEvents () {
+      this.editor.codemirror.on('change', () => {
+        let value = this.editor.value()
+        if (this.localCache) localStorage.markdownContent = value
+        this.$emit('input', value)
+        this.$emit('on-change', value)
+      })
+      this.editor.codemirror.on('focus', () => {
+        this.$emit('on-focus', this.editor.value())
+      })
+      this.editor.codemirror.on('blur', () => {
+        this.$emit('on-blur', this.editor.value())
+      })
+    }
+  },
+  mounted () {
+    this.editor = new Simplemde(Object.assign(this.options, {
+      element: this.$refs.editor
+    }))
+    /**
+     * 事件列表为Codemirror编辑器的事件，更多事件类型，请参考：
+     * https://codemirror.net/doc/manual.html#events
+     */
+    this.addEvents()
+    let content = localStorage.markdownContent
+    if (content) this.editor.value(content)
+  }
+}
+</script>
+
+<style lang="less">
+.markdown-wrapper{
+  .editor-toolbar.fullscreen{
+    z-index: 9999;
+  }
+  .CodeMirror-fullscreen{
+    z-index: 9999;
+  }
+}
+</style>

src/router/routers.js

@@ -68,6 +68,15 @@ export default [
         },
         component: () => import('@/view/components/split-pane/split-pane.vue')
       },
+      {
+        path: 'markdown_page',
+        name: 'markdown_page',
+        meta: {
+          icon: 'social-markdown',
+          title: 'Markdown编辑器'
+        },
+        component: () => import('@/view/components/markdown/markdown.vue')
+      },
       {
         path: 'icons_page',
         name: 'icons_page',

src/view/components/markdown/markdown.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <markdown-editor v-model="content"/>
+  </div>
+</template>
+
+<script>
+import MarkdownEditor from '_c/markdown'
+export default {
+  name: 'markdown_page',
+  components: {
+    MarkdownEditor
+  },
+  data () {
+    return {
+      content: ''
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>