Vue项目集成markdown富文本编辑器，原来这么简单

这里我们使用的是mavonEditor，官网文档：https://github.com/hinesboy/mavonEditor

效果图

1. 安装依赖

npm install mavon-editor --save

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

// 注册mavon-editor组件
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor);

3. 集成到vue组件中

<template>
    <div class="editmd">
        <div class="div1">
            <el-input v-model="titleinput" placeholder="请输入文章标题（5~100个字）" class="titleinput" size="medium" minlength="5" maxlength="100" show-word-limit>
            </el-input>
            <el-button type="primary" round class="push-editmd" size="small">发布文章</el-button>
        </div>
        <div class="div2">
            <mavon-editor
                style="height: 100%"
                v-model="editorContent"
                :ishljs="true"
                ref=md
                @imgAdd="imgAdd"
                @imgDel="imgDel"
            ></mavon-editor>
        </div>
        
    </div>
</template>

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

      mounted(){
            window.addEventListener("beforeunload", this.beforeUnloadHandler, false)
      },
      destroyed() {
        window.removeEventListener("beforeunload", this.beforeUnloadHandler, false)
        },

      methods: {
        // 此处返回任意字符串，不返回null即可，不能修改默认提示内容
        beforeUnloadHandler(e) {
            e.returnValue = "离开此页面？"
        },
        // 图片上传
        imgAdd (pos, $file) {
            let formdata = new FormData()
            formdata.append('file', $file)
            this.$axios({
               url: '/file/upload',
               method: 'post',
               data: formdata,
               headers: { 'Content-Type': 'multipart/form-data;charset=UTF-8' ,
                'aaa':'aaa'
               },
           }).then((url) => {
               // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
            //    this.$vm.$img2Url(pos, url.data);
               this.$refs.md.$img2Url(pos, url.data);
           })
        },
        // 图片删除
        imgDel (pos) {
            delete this.imgFile[pos]
        }
      }
  }
</script>

<style scoped lang="less" src="@/assets/css/creation_editmd.scss"></style>

4. 看下效果