积土成山，风雨兴焉；积水成渊，蛟龙生焉；积善成德，而神明自得，圣心备焉。故不积跬步，无以至千里，不积小流无以成江海。齐骥一跃，不能十步，驽马十驾，功不在舍。面对悬崖峭壁，一百年也看不出一条裂缝来，但用斧凿，能进一寸进一寸，能进一尺进一尺，不断积累，飞跃必来，突破随之。

目录

MdEditorV3官方文档

安装

npm install md-editor-v3
# yarn add md-editor-v3

基本使用

<template>
  <div>
    <md-editor v-model="text" />
  </div>
</template>

<script>
import MdEditor from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
export default {
  name: "index",
  components:{
    MdEditor
  },
  data(){
    return{
      text: ''
    }
  }
}
</script>

<style scoped>

</style>

其中有一个需要注意的属性：editorId。默认值：md-editor-v3 。编辑器唯一标识，非必须项，但当相同页面存在两个编辑器时，请务必区别该属性。

实现展示

在写好之后，进行展示。一般需要使用某解析器将其解析成html。而此插件就比较方便，只展示预览效果即可。只需要添加一个属性 previewOnly即可，这样就不会显示编辑框之类的其他东西，只会显示在预览状态下的效果。 如下：

<template>
  <div>
    <md-editor v-model="text" />
    <md-editor v-model="text" previewOnly />-->
    <br>
  </div>
</template>

<script>
import MdEditor from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
export default {
  name: "index",
  components:{
    MdEditor
  },
  data(){
    return{
      text: ''
    }
  }
}
</script>

<style scoped>

</style>

注意：上面存在了两个编辑器，不推荐这样写。这里只是为了方便开效果，所以放在了同一个页面之内。

实现显示代码块行数

通过 showCodeRowNumber 属性值来控制是否显示行数。

<template>
  <div>
    <md-editor v-model="text" :showCodeRowNumber="true"/>
    <br>
  </div>
</template>

<script>
import MdEditor from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
export default {
  name: "index",
  components:{
    MdEditor
  },
  data(){
    return{
      text: ''
    }
  }
}
</script>

<style scoped>

</style>