vue富文本编辑器mavonEditor实现md/html的保存

先置条件

1.通过npm命令安装

npm install mavon-editor --save

2.在main.js中全局引入

   import Vue from 'vue'
    import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    // use
    Vue.use(mavonEditor)
    new Vue({
        'el': '#main',
        data() {
            return { value: '' }
        }
    })

3.在页面的应用

<div id="main">
    <mavon-editor v-model="value"/>
</div>

我在实现全局注册中遇到的问题

这是官方给的几种全局注册的方法

问题描述：
根据官方的方法进行全局注册，F12查看，报这个问题，查了很久的，试了很多方法，没得解决

 
 Unknown custom element: <mavon-editor>

解决方案：
隔了一天，突然看到如下图片，对VUE语法还是小白，如果有路过的大神可以解答一下为什么，我就把Vue.use(mavonEditor)这个部分的内容移到

import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

的下面，神奇，问题解决，这种问题是不是太***。

具体实现

如上面的mavonEditor已经没有任何问题，接下来实现md/html的保存挺简单的先看下效果，已经能获取到md/html，接下来就将内容保存到数据库的实现

1. 获取md/html内容的实现，

<template>
  <div id="main" class="markdown-container">
    <mavon-editor 
    v-model="value" ref=md  @save="save" 
   placeholder="请输入文本" >
   
   
   </mavon-editor>
        
   <el-button class="editor-btn" type="primary" @click="submit">提交</el-button>
</div>
</template>


<script>

export default {
    data(){
        return {
         value: '123',
         
        }

    },
    methods:{
        save(){
          console.log("this is render");
          console.log("this is value");


        },
        submit(){
            /*通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
            this.$refs.md为原型方法*/
            // this.$set(this.page_article, "html_content", this.$refs.md.d_render); // html
            // this.$set(this.page_article, "md_content", this.$refs.md.d_value); //md

            console.log(this.$refs.md.d_render);
            console.log(this.$refs.md.d_value);
        }
    
    },
    created(){

    }
    

}
</script>

<style>

</style>

未完待续！