Vue使用mavon-editor插件

1、安装mavon-editor插件

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、HTML使用插件展示单栏(预览区域) 主要字段subfield

mavon-editor
        class="md"
        :value="webDataString"
        :subfield="false"
        :defaultOpen="'preview'"
        :toolbarsFlag="false"
        :editable="false"
        :scrollStyle="true"
        :ishljs="true"
      />

image.png

4、HTML使用插件展示双栏(编辑预览同屏)

<mavon-editor
        class="mavon"
        codeStyle="atom-one-dark"
        v-model="webDataString"
        :ishljs="true"
        ref="md"
      />

image.png