Vue引入 mavon-editor 编辑器的详细步骤

Vue引入 mavon-editor 编辑器的详细步骤

一、编辑器的引入

如果你的项目之前没有安装过该编辑器，那就得先安装编辑器

在自己的项目的根目录执行下列命令：

 npm install mavon-editor --save

之后等待安装成功，如图：

二、在vue项目的src/main.js注册

点开main.js，全局注册,并且导入mavon-editor样式

import 'mavon-editor/dist/css/index.css'
import mavonEditor from 'mavon-editor'
...
...
Vue.use(mavonEditor)

三、组件使用编辑功能

建立组件：ArticleEditor.vue

组件里面启用mavon-editor编辑器

ArticleEditor.vue初始代码如下：

<template>
  <mavon-editor
    v-model="article.articleContentMd&