vue+markdown编辑器mavonEditor

GitHub链接

第一步：npm安装

npm install mavon-editor --save

第二步：在main.js中引用

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import iView from 'iview';
import 'iview/dist/styles/iview.css';
//引入markdown编辑器
import mavonEditor from 'mavon-editor';
import 'mavon-editor/dist/css/index.css';
// use
Vue.use(mavonEditor)

Vue.config.productionTip = false


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: {App},
  template: '<App/>'
})

第三步：直接在vue页面中使用即可，可以使用v-model进行数据的双向绑定

<FormItem label="公告内容" prop="content">
  <mavon-editor style="width: 70%" v-model="notifyForm.content"/>
</FormItem>

第四步：页面显示如下