Vue实战笔记(四) 引入Mavon Editor

大家好，我是半虹，这篇文章来讲如何在 Vue 中引入 $\text{Mavon Editor}$

---

1、背景介绍

在上篇文章中，我们介绍过如何在 Vue 中引入富文本编辑器 $\text{Quill Editor}$

在这篇文章中，我们来讲讲怎么在 Vue 中引入 $\text{Markdown}$ 编辑器 $\text{Mavon Editor}$

$\text{Markdown}$ 其实是一种轻量级标记语言，依靠特殊的标记渲染对应的样式，常用于博客文章的编辑

$\text{Markdown}$ 编辑器与富文本编辑器之间的对比如下：

1. 功能上

   二者所实现的功能基本相同

2. 使用上

   富文本编辑器是所见即所得，选中内容之后通过鼠标点击按钮即可使用相应样式，非常直观

   而 $\text{Markdown}$  编辑器通过特殊的标记实现对应的样式，有一套自己的标记语言，需要一点时间适应

   且 $\text{Markdown}$  编辑器大多是分屏预览，没有那么直观，只有小部分有实现所见即所得渲染

3. 分享上

   富文本编辑器在实现上各有不同，如果将一个网站上的富文本复制到另一个网站上，可能会排版错乱

   而 $\text{Markdown}$  有一套标准规范，所以在各个网站上的共享很方便

   且 $\text{Markdown}$  本身是文本形式，甚至可以用纯文本编辑器来打开，格式也不会有明显错乱

代表性的富文本编辑器如 $\text{Word}$，代表性的 $\text{Markdown}$ 编辑器如 $\text{Typora}$，本文正是 $\text{Typora}$ 所写

好了，下面开始进入正题

2、在 Vue2 中引入 Mavon Editor

在这部分，我们首先通过 Vue 脚手架 @vue/cli 新建 Vue2 项目 ，然后在该项目中引入 $\text{Mavon Editor}$

在此之前，先说一下环境 ：

• Node：12.18.2
• NPM：6.14.5
• @vue/cli：4.5.12

准备就绪，下面正式开始：

1. 创建项目

   我们可以在命令行中通过以下命令新创建一个 Vue2 项目

   > vue create vue2-mavon-demo
   

   输入上述的命令后，会有三个选项，这里我们选择第一个，创建默认的 Vue2 项目

   ? Please pick a preset: (Use arrow keys)
   > Default ([Vue 2] babel, eslint)
     Default ([Vue 3] babel, eslint)
     Manually select features
   

   执行上述的选择后，等待完成即可，新建的目录结构如下：

   + vue2-mavon-demo
       + node_modules      // 外部模块目录
       + public            // 项目资源目录
       + src               // 源码目录
           + assets        // 组件资源目录
           + components    // 公共组件目录
           - App.vue       // 根组件
           - main.js       // 主入口
       - babel.config.js   // 编译配置文件
       - package-lock.json // 项目配置文件 (自动生成)
       - package.json      // 项目配置文件 (手动维护)
       - README.md         // 项目描述文件
   

2. 安装模块

   在这里，我们通过 npm 的方式安装 mavon-editor，注意版本是 2.10.4，其对应支持 Vue2

   > npm install --save [email protected]
   

3. 注册模块

   使用组件之前要先进行注册，注册组件的方式有两种 ，分别是全局注册和局部注册

   全局注册：在主入口文件添加以下代码，即 main.js，之后可以在任意页面中使用

   import Vue from 'vue'
   import App from './App.vue'
   
   // 新增：导入组件
   import mavonEditor from 'mavon-editor'
   
   // 新增：导入样式
   import 'mavon-editor/dist/css/index.css'
   
   // 新增：注册组件
   Vue.use(mavonEditor)
   
   new Vue({
     render: h => h(App),
   }).$mount('#app')
   

   局部注册：在需要的页面添加以下代码，如 xxx.vue，之后只能在当前页面中使用

   <script>
   // 新增：导入组件
   import mavonEditor from 'mavon-editor'
   
   // 新增：导入样式
   import 'mavon-editor/dist/css/index.css'
   
   export default {
     // 新增：注册组件
     components : {
       'mavonEditor': mavonEditor.mavonEditor
     }
   }
   script>
   

4. 使用模块

   之后，在需要引入组件的页面，添加以下代码即可，为了演示方便，以下示例直接在 App.vue 中引入

   <template>
     <div id="app">
       <mavon-editor v-model="content" />
       <button @click="print">Print Content In Consolebutton>
     div>
   template>
   
   <script>
   // 默认已全局注册
   // 如果是局部注册，则需要按照上述所说，在当前页面添加代码
   
   export default {
     name: 'App',
     data: function() {
       return {
         content: ''
       }
     },
     methods: {
       print: function() {
         console.log(this.content)
       }
     }
   }
   script>
   

   最后，可通过以下命令在本地上运行项目

   > npm run serve
   

   此时，在浏览器中打开指定端口即可看到渲染效果如下

   

3、在 Vue3 中引入 Mavon Editor

在这部分，我们还是通过 Vue 脚手架 @vue/cli 新建 Vue3 项目 ，然后在该项目中引入 $\text{Mavon Editor}$

与上类似，环境还是一样 ：

• Node：12.18.2
• NPM：6.14.5
• @vue/cli：4.5.12

不仅如此，步骤也差不多：

1. 创建项目

   我们还是在命令行中通过相同命令新创建一个 Vue3 项目

   > vue create vue3-mavon-demo
   

   输入上述的命令后，会有三个选项，这里我们选择第二个，创建默认的 Vue3 项目

   ? Please pick a preset: (Use arrow keys)
     Default ([Vue 2] babel, eslint)
   > Default ([Vue 3] babel, eslint)
     Manually select features
   

   执行上述的选择后，等待完成即可，目录结构也是一样的

   + vue3-mavon-demo
       + node_modules      // 外部模块目录
       + public            // 项目资源目录
       + src               // 源码目录
           + assets        // 组件资源目录
           + components    // 公共组件目录
           - App.vue       // 根组件
           - main.js       // 主入口
       - babel.config.js   // 编译配置文件
       - package-lock.json // 项目配置文件 (自动生成)
       - package.json      // 项目配置文件 (手动维护)
       - README.md         // 项目描述文件
   

2. 安装模块

   在这里，我们通过 npm 的方式安装 mavon-editor，注意版本是 3.0.1，其对应支持 Vue3

   > npm install --save [email protected]
   

3. 注册模块

   使用组件之前要先进行注册，注册组件的方式有两种 ，分别是全局注册和局部注册

   全局注册：在主入口文件添加以下代码，即 main.js，之后可以在任意页面中使用

   import { createApp } from 'vue'
   import App from './App.vue'
   
   // 新增：导入组件
   import mavonEditor from 'mavon-editor'
   
   // 新增：导入样式
   import 'mavon-editor/dist/css/index.css'
   
   createApp(App)
     .use(mavonEditor) // 新增：注册组件
     .mount('#app')
   

   局部注册：在需要的页面添加以下代码，如 xxx.vue，之后只能在当前页面中使用

   局部注册的方法与 Vue2 一样

   <script>
   // 新增：导入组件
   import mavonEditor from 'mavon-editor'
   
   // 新增：导入样式
   import 'mavon-editor/dist/css/index.css'
   
   export default {
     // 新增：注册组件
     components : {
       'mavonEditor': mavonEditor.mavonEditor
     }
   }
   script>
   

4. 使用模块

   之后，在需要引入组件的页面，添加以下代码即可，为了演示方便，以下示例直接在 App.vue 中引入

   这部分的方法也与 Vue2 一样

   <template>
     <div id="app">
       <mavon-editor v-model="content" />
       <button @click="print">Print Content In Consolebutton>
     div>
   template>
   
   <script>
   // 默认已全局注册
   // 如果是局部注册，则需要按照上述所说，在当前页面添加代码
   
   export default {
     name: 'App',
     data: function() {
       return {
         content: ''
       }
     },
     methods: {
       print: function() {
         console.log(this.content)
       }
     }
   }
   script>
   

   最后，可通过以下命令在本地上运行项目，并打开浏览器验证效果

   > npm run serve
   

   注意，你可能遇到下面的报错：

   Error: @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the dependency tree.
   

   那么只要按照要求去升级就行：

   > npm install [email protected]
   

4、进阶配置

最后，简单说一下 mavon-editor 常用的 props：

名称	类型	默认值	描述
language	String	zh-CN	语言选择
toolbarsFlag	Boolean	true	true 是显示工具栏，false 是隐藏工具栏
toolbars	Object		用于在其显示工具栏时指定具体显示的按钮 默认全部开启，传入自定义对象可选择启用部分按钮
subfield	Boolean	true	true 编辑预览同屏，false 编辑预览分屏
defaultOpen	String		用于在编辑预览分屏时指定具体显示的区域 若为 edit 则显示编辑区域；若为 preview 则显示预览区域

更具体的 props 介绍可以参考 官方文档，此外，编辑器相关的 events 也可参考 官方文档

---

好啦，本文到此结束，感谢您的阅读！

如果你觉得这篇文章有需要修改完善的地方，欢迎在评论区留下你宝贵的意见或者建议

如果你觉得这篇文章还不错的话，欢迎点赞、收藏、关注，你的支持是对我最大的鼓励 (/ω＼)