🚀 添加Markdown 组件

README.md

@@ -45,11 +45,13 @@ npm run new:view
 1. [x] 数字渐变
 2. [x] 树状表格
 3. [x] 拖拽列表
-4. [ ] 树状下拉选择器 -- 开发中
-5. [ ] 可拖动抽屉
-6. [ ] 图片裁剪
-7. [ ] 国际化
-8. [ ] ...
+4. [x] Markdown 编辑器
+5. [ ] 富文本编辑器
+6. [ ] 树状下拉选择器 -- 开发中
+7. [ ] 可拖动抽屉
+8. [ ] 图片裁剪
+9. [ ] 国际化
+10. [ ] ...
 
 ## 系统功能
 ### 已完成的功能

package.json

@@ -17,6 +17,7 @@
     "axios": "^0.18.0",
     "countup.js": "^1.9.3",
     "element-ui": "^2.5.0",
+    "mavon-editor": "^2.6.16",
     "qs": "^6.6.0",
     "tree-table-vue": "^1.1.0",
     "vue": "^2.5.21",

src/App.vue

@@ -9,9 +9,7 @@ body {
   font-size: 16px;
 }
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
   font-size: 16px;
 }
 * {

src/components/cc-markdown/index.js

@@ -0,0 +1,2 @@
+import Main from './main.vue'
+export default Main

src/components/cc-markdown/main.vue

@@ -0,0 +1,114 @@
+<template>
+  <mavon-editor
+    ref="mavonEditor"
+    :toolbars="toolbars"
+    @imgAdd="$imgAdd"
+    @change="change"
+    @save="save"
+    :boxShadow="false"
+    v-model="markdown"
+  />
+</template>
+
+<script>
+import Vue from 'vue'
+import mavonEditor from 'mavon-editor'
+import 'mavon-editor/dist/css/index.css'
+import { uploadFile } from '../../api/index.js'
+Vue.use(mavonEditor)
+export default {
+  name: '',
+  props: {
+    value: {
+      default: () => ({ markdown: '', html: '' })
+    }
+  },
+  data () {
+    return {
+      markdown: this.value.markdown,
+      html: this.value.html,
+      toolbars: {
+        bold: true, // 粗体
+        italic: true, // 斜体
+        header: true, // 标题
+        underline: true, // 下划线
+        strikethrough: true, // 中划线
+        mark: true, // 标记
+        superscript: true, // 上角标
+        subscript: true, // 下角标
+        quote: true, // 引用
+        ol: true, // 有序列表
+        ul: true, // 无序列表
+        link: true, // 链接
+        imagelink: true, // 图片链接
+        code: true, // code
+        table: true, // 表格
+        fullscreen: true, // 全屏编辑
+        readmodel: false, // 沉浸式阅读
+        htmlcode: false, // 展示html源码
+        help: true, // 帮助
+        /* 1.3.5 */
+        undo: true, // 上一步
+        redo: true, // 下一步
+        trash: true, // 清空
+        save: true, // 保存（触发events中的save事件）
+        /* 1.4.2 */
+        navigation: true, // 导航目录
+        /* 2.1.8 */
+        alignleft: true, // 左对齐
+        aligncenter: true, // 居中
+        alignright: true, // 右对齐
+        /* 2.2.1 */
+        subfield: true, // 单双栏模式
+        preview: true // 预览
+      }
+    }
+  },
+  watch: {
+    value () {
+      this.markdown = this.value.markdown
+      this.html = this.value.html
+    }
+  },
+  methods: {
+    async $imgAdd (filename, file) {
+      const formdata = new FormData()
+      formdata.append('file', file)
+      const res = await uploadFile(formdata)
+      if (res.code === 1) {
+        const me = this.$refs.mavonEditor
+        me.$img2Url(filename, res.data.url)
+      } else {
+        this.$Message.error('图片上传失败，请重试')
+      }
+    },
+    /**
+   * 清除掉 HTML 标签
+   */
+    wordCount (render) {
+      let n = render.replace(/<\/?.+?\/?>/g, '')
+      n = n.replace(/\s+/g, '')
+      this.wordLength = n === '' ? 0 : n.length
+    },
+    change (value, render) {
+      if (value === '' || render === '') {
+        return
+      }
+      this.html = render
+      this.wordCount(render)
+      this.$emit('input', {
+        markdown: value,
+        html: render,
+        contentLength: this.wordLength
+      })
+      this.$emit('change')
+    },
+    save () {
+      this.$emit('save')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/router/components/index.js

@@ -10,5 +10,9 @@ export default [
   {
     path: '/components/drag-list',
     component: () => import(/* webpackChunkName: "components-drag-list" */ '@/views/components/drag-list/index.vue')
+  },
+  {
+    path: '/components/markdown',
+    component: () => import(/* webpackChunkName: "components-markdown" */ '@/views/components/markdown/index.vue')
   }
 ]

src/views/components/markdown/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="markdown">
+    <el-card>
+      <cc-markdown style="max-height: 600px;" v-model="markdown"></cc-markdown>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import CcMarkdown from '../../../components/cc-markdown'
+export default {
+  name: 'markdown',
+  components: {
+    CcMarkdown
+  },
+  data () {
+    return {
+      markdown: {
+        markdown: '# markdown 编辑器\n基于 [mavon-editor](https://www.npmjs.com/package/mavon-editor) 插件',
+        html: ''
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>