在vue中集成markdown富文本编辑器

在vue中引入集成markdown富文本编辑器

这里我们使用 mavonEditor，链接：https://github.com/hinesboy/mavonEditor

1、安装

npm install mavon-editor --save

2、在main.js中注册编辑器组件

    import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    // 注册mavon-editor组件
    Vue.use(mavonEditor);
    new Vue({
        'el': '#main'
    })

 3、集成到vue组件中

<template>
      <div id="editor">
        <mavon-editor
          style="height: 100%"
          v-model="editorContent"
          :ishljs="true"
          ref=md
          @imgAdd="imgAdd"
          @imgDel="imgDel"
        ></mavon-editor>
      </div>
</template>

​
<script>
  import { mavonEditor } from 'mavon-editor'
  import 'mavon-editor/dist/css/index.css';
  export default {
      name: "Write",
      data(){
          return {
             
          }
      },
      
      components: {
        mavonEditor
      },
      
</script>

 4、编辑图片上传及删除功能

图片上传使用到@imgAdd="imgAdd"中的 imgAdd方法，对此方法编辑ajax请求即可

图片删除使用到@imgDel="imgDel"中的 imgDel方法，对此方法编辑ajax请求即可

该编辑器可使用Ctrl + S 进行快捷键保存文档，可进入该编辑器官方文件查看，保存使用的方法，从而对此方法编辑ajax请求即可

官方文档：https://github.com/hinesboy/mavonEditor