markdown编辑器

//markdown编辑器

<template>
  <div>
    <div class="edit">
      <mavon-editor
              v-model="model.content"
              :placeholder="'Edit ···'"
              ref="md"
              @imgAdd="imgAdd"
              @imgDel="imgDel"
              @change="change"
              :toolbars="toolbars"
              :toolbarsBackground="'#f9f9f9'"
              style="height: calc(100vh - 50px)"
      ></mavon-editor>
      <el-button type="primary" @click="submit">发表</el-button>
    </div>
    <el-card>
            <h1 style="text-align: center">预览</h1>
            <mavon-editor
                      v-model="model.content"
                      :subfield="false"
                      :boxShadow="false"
                      defaultOpen="preview"
                      :toolbarsFlag="false"
            ></mavon-editor>
    </el-card>
  </div>
</template>

<script>
import Qs from 'qs'

export default {
  name: 'App',
  data() {
    return {
      model:{
        content:'# 一级标题\n' +
                '\n' +
                '```python\n' +
                'import time\n' +
                'import asyncio\n' +
                'import requests\n' +
                ' \n' +
                ' \n' +
                'async def test2(i):\n' +
                '    r = await other_test(i)\n' +
                '    print(i,r)\n' +
                ' \n' +
                ' \n' +
                'async def other_test(i):\n' +
                '    r = requests.get(i)\n' +
                '    print(i)\n' +
                '    await asyncio.sleep(4)\n' +
                '    print(time.time()-start)\n' +
                '    return r\n' +
                ' \n' +
                ' \n' +
                'if __name__ == \'__main__\':\n' +
                '    url = ["https://segmentfault.com/p/1210000013564725",\n' +
                '           "https://www.jianshu.com/p/83badc8028bd",\n' +
                '           "https://www.baidu.com/"]\n' +
                '    task = [asyncio.ensure_future(test2(i)) for i in url]\n' +
                '    start = time.time()\n' +
                '    asyncio.get_event_loop().run_until_complete(asyncio.wait(task))\n' +
                '\n' +
                '```'
      },
      html: '',
      img_file: [],
      //参数
      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: true, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: false, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: false // 预览
      }
    }
  },
  methods: {
    async imgAdd (pos, $file) {
        let formdata = new FormData();
        formdata.append('image', $file);
        this.img_file[pos] = $file;
        const {data: res, status: status} = await this.axios.post('base/uploadImage', formdata, {headers: {'Content-Type': 'multipart/form-data'}});
        if (status !== 200) return this.$message.error("上传图片失败");
        this.$refs.md.$img2Url(pos, this.domain + res.url)
    },
    async imgDel (pos) {
      delete this.img_file[pos];
      var img_path = pos[0].replace(this.domain+"/", '');
      const {data: res, status: status} = await this.axios.post('base/deleteFile', Qs.stringify({'file_path': img_path}));
      if (status !== 200) return this.$message.error("删除图片失败");
    },
    change (value, render) {
      this.html = render
    },
    // 提交
    submit () {
      console.log(this.model.content);
      console.log(this.html)
    },
  }
}
</script>

<style lang="less" scope>
.edit{
    margin-top: 30px;
}
</style>