基于若依框架实现markdown在线编辑

基于若依框架实现markdown在线编辑

1. 下载mavon-editor

npm install mavon-editor --save

2. 打开main.js文件, 添加如下

// markdown组件
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";

// markdown组件
Vue.component("mavon-editor", mavonEditor);

3. 打开package.json, 找到 “dependencies”

// 添加
"mavon-editor": "^2.10.4",

4. 新建vue页面

<template>
  <div>
    <mavon-editor class="markdown"
                  :value="get_mark_data()"
                  :subfield="true"
                  :defaultOpen="prop.defaultOpen"
                  :toolbarsFlag="prop.toolbarsFlag"
                  :editable="prop.editable"
                  :scrollStyle="prop.scrollStyle"
                  :toolbars="toolbars"
                  :code-style="prop.codeStyle"
                  @change="changeFn"
                  @save="saveFn"
                  @imgAdd="imgAddFn"
                  language="zh"
                  navigation
                  ishljs
                  ref="md"
    >
      <!-- 左工具栏后加入自定义按钮  -->
      <template slot="left-toolbar-after">
        <button
          type="button"
          @click="downFile()"
          class="op-icon fa fa-mavon-align-left"
          aria-hidden="true"
          title="下载"
        ></button>
      </template>
    </mavon-editor>
</template>

<script>
import { saveAs } from 'file-saver'
import { saveFileAndData } from '@/utils/util'

export default {
  data() {
    return {
      fileInfo: '',
      context: '',//输入的数据
      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: true, // 沉浸式阅读
        htmlcode: true, // 展示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 // 预览
      }
    }
  },
  created() {
    
  },
  computed: {
    prop() {
      let data = {
        subfield: false,// 单双栏模式
        defaultOpen: 'preview',//edit： 默认展示编辑区域 ， preview： 默认展示预览区域
        editable: true,
        toolbarsFlag: true,
        scrollStyle: true,
        bold: false,
        codeStyle: 'code-github'
      }
      return data
    }
  },

  methods: {
    // 编辑区域内容改变
    changeFn(value, render) {
      console.log('编辑改变数据====')
      this.fileInfo = render
      this.html = render
    },
    // 保存的时候的事件
    saveFn(e) {
      this.fileInfo = e
    },
    // 下载.md文件
    downFile() {
      console.log('下载文件')
      let name = new Date()+'.md'
      let str = new Blob([this.fileInfo], {type: 'application/x-genesis-rom'});
      // 注意这里要手动写上文件的后缀名
      saveAs(str, name );
    },
    // 添加上传图片事件
    imgAddFn(pos, imgfile) {
      var formdata = new FormData()
      formdata.append('file', imgfile)
      // 第一步.将图片上传到服务器.
      saveFileAndData('yizhi-note', formdata).then(res => {
        // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
        /**
         * $vm 指为mavonEditor实例，可以通过如下两种方式获取
         * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
         * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
         */
        // 第一种不知道为什么$vm不好使，未解决
        // $vm.$img2Url(pos, res);
        // 第二种 需要在上方添加 添加 ref = md，然后才可以使用
        this.$refs.md.$img2Url(pos, res.data.url)
      })
    },

    get_mark_data() {
      // return 'asd'
    }
  }
}
</script>
<style scoped>
.markdown {
  /*width: 700px;*/
  width: 100%;
  /* 暂时未限制高度 height: 500px;*/
  margin: 0 auto;
}
</style>

解析：

1. changeFn()：监听编辑区域改变数据，根据需要完善功能

2. saveFn()：保存事件，根据需要完善功能

3. 自定义添加按钮

   <!-- 左工具栏后加入自定义按钮  -->
         <template slot="left-toolbar-after">
           <button
             type="button"
             @click="downFile()"
             class="op-icon fa fa-mavon-align-left"
             aria-hidden="true"
             title="下载"
           ></button>
         </template>
   

   downFile()：下载.md文件到本地

4. imgAddFn()：上传文件事件，这里集成了自己的oss服务器，最后用的是图片路径