mavon-editor的使用以及添加锚点连接

一、mavon-editor的使用

参考：mavon-edior的npm地址
1、安装

$ npm install mavon-editor --save

2、引入

// 全局注册
    // import with ES6
    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>

4、其他属性以及事件见文档

二、页面渲染
markdown-it官网链接
1、用markdown-it

 let md = new MarkdownIt({ html: false });
 //转化成为html代码
  this.result = md.render(this.value);

2、由于markdown-it直接渲染markdown语法，没有a标签，无法进行锚点，所有我们还是用mavon-erditor中的d_render值；

三、设置字体颜色
Markdown进阶（更改字体、颜色、大小，设置文字背景色，调整图片大小设置居中）

四、添加锚点

参考：mavon-editor编辑器页面瞄点

//获取锚点id
 listA() {
   this.$nextTick(function () {
       let aData = document.querySelectorAll("#markDown a");
       var link=[];
       aData.forEach((item)=>{
          link.push({
              id:item.id,
              label:item.nextSibling.nodeValue
          })
       })
       this.aData = link;
    })
  },
  //点击锚点
  url(url) {
      document.getElementById(url).scrollIntoView()
  },

    <div style="display: flex">
      <div>
        <div v-for="item in aData" :key="item.id" @click="url(item.id)">{{item.label}}					   </div>
      </div>
      <div style="flex: 1; margin-left: 100px" id="markDown">
        <div v-html="result" style="height: 500px; overflow: auto"></div>
      </div>
    </div>

效果展示