likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 16

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

1、背景介绍

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

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

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

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

  1. 功能上

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

  2. 使用上

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

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

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

  3. 分享上

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

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

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

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

好了，下面开始进入正题

2、在 Vue2 中引入 Mavon Editor

在这部分，我们首先通过 Vue 脚手架 @vue/cli 新建 Vue2 项目 ，然后在该项目中引入 Mavon Editor\text{Mavon Editor}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 mavon-editor@2.10.4

  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 Console</button>
  </div>
</template>

<script>
// 默认已全局注册
// 如果是局部注册，则需要按照上述所说，在当前页面添加代码

export default {
  name: 'App',
  data: function() {
    return {
      content: ''
    }
  },
  methods: {
    print: function() {
      console.log(this.content)
    }
  }
}
</script>

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

    > npm run serve

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

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

3、在 Vue3 中引入 Mavon Editor

在这部分，我们还是通过 Vue 脚手架 @vue/cli 新建 Vue3 项目 ，然后在该项目中引入 Mavon Editor\text{Mavon Editor}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 mavon-editor@3.0.1

  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 Console</button>
  </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 vue@3.2.26

4、进阶配置

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

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

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

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

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

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