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

news2025/10/31 7:46:36

大家好，我是半虹，这篇文章来讲如何在 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

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

    渲染效果

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 也可参考 官方文档


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

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/651181.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

433/315接收芯片 XL520，SOP8封装，适用于低功耗要求产品

433/315接收芯片 XL520，SOP8封装，适用于低功耗要求产品

XL520是一款高集成度、 低功耗的单片ASK/0OK射频接收芯片。高频信号接收功能全部集成于片内以达到用最少的外围器件和最低的成本获得最可靠的接收效果。 XL520接收芯片为SOP8封装&#xff0c;正常工作电压范围2.0~5.5V&#xff0c;正常工作电流3.0~3.2mA&#xff0c;启动时间2…
阅读更多...
pdf可以转换为word文档吗？分享这两个方法给大家！

pdf可以转换为word文档吗？分享这两个方法给大家！

PDF 是一种常见的文件格式&#xff0c;用于可靠地显示和共享文档。然而&#xff0c;当需要编辑或重用 PDF 内容时&#xff0c;将其转换为可编辑的 Word 文档是一个常见的需求。在本文中&#xff0c;我们将介绍两种方法&#xff0c;以帮助您将 PDF 转换为 Word 文档&#xff0c;…
阅读更多...
SpringBoot+Bootstrap图书馆管理系统

SpringBoot+Bootstrap图书馆管理系统

主要功能 管理员权限登录&#xff1a; ①管理员拥有最高权限&#xff0c;可以分配角色&#xff0c;使不同角色&#xff08;教师、学生等&#xff09;登录显示不同界面的效果 ②首页、系统设置&#xff1a;菜单管理、角色管理、用户管理、日志管理、数据备份、违规统计、占座统…
阅读更多...
Unity基础5——物理检测

Unity基础5——物理检测

一、层级 Layer ​ Unity 中设置了共 32 层 Layer&#xff0c;如图&#xff0c;可以点击 Add Layer 添加自定义的 Layer ​ 通过名字得到层级编号 LayerMask.NameToLayer(string layer) ​ 我们需要通过编号左移构建二进制数&#xff0c;这样每一个编号的层级都是对应位为 1 的…
阅读更多...
如何使用Jmeter进行http接口测试？

如何使用Jmeter进行http接口测试？

目录 前言&#xff1a; 一、开发接口测试案例的整体方案&#xff1a; 二、接口自动化适用场景&#xff1a; 三、接口测试环境准备 四、创建工程&#xff1a; 总结&#xff1a; 前言&#xff1a; 本文主要针对http接口进行测试&#xff0c;使用Jmeter工具实现。 Jmter工具设…
阅读更多...
HTMLCSS Day08 CSS transition过渡

HTMLCSS Day08 CSS transition过渡

文章目录 CSS过渡-Transitions-过渡三要素-过渡触发-transition-property 规定应用过渡的 CSS 属性的名称。-transition-duration 定义过渡效果花费的时间。默认是 0。-transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。-transition-delay 规定过…
阅读更多...
史上最全文件类型读写库大盘点！什么？还包括音频、视频？

史上最全文件类型读写库大盘点！什么？还包括音频、视频？

介绍史上最全PYTHON文件类型读写库大盘点&#xff01;包含常用和不常用的大量文件格式&#xff01;文本、音频、视频应有尽有&#xff01;废话不多说&#xff01;走起来&#xff01; 先给大家快捷总结&#xff1a; 文件格式Python库文本文件内置open函数CSV文件csvJSON文件jso…
阅读更多...
信号量实现线程同步代码

信号量实现线程同步代码

信号量&实现线程同步代码 信号量线程同步示例代码 信号量 信号量&#xff08;Semaphore&#xff09;是一种用于多线程编程中的同步工具&#xff0c;用于管理对共享资源的访问。它可以控制同时访问某个资源的线程数量&#xff0c;并提供了对共享资源的互斥访问。 信号量通…
阅读更多...
一个支持WinForms换肤的开源组件

一个支持WinForms换肤的开源组件

博主介绍&#xff1a; &#x1f308;一个10年开发经验.Net老程序员&#xff0c;微软MVP、博客专家、CSDN/阿里云 .Net领域优质创作者&#xff0c;专注于.Net领域知识、开源项目分享&#xff01;&#x1f308; &#x1f6d5;文末获取&#xff0c;加入交流群&#x1f6d5; &#…
阅读更多...
java数组（Array）

java数组（Array）

文章目录 一维数组的使用数组的长度数组元素的引用一维数组的遍历一维数组内存分析 数组元素的默认值多维数组的使用静态初始化动态初始化数组的长度和角标二维数组的遍历内存解析 Arrays工具类的使用 一维数组的使用 int[] arr; int arr1[]; double[] arr2; String[] arr3; …
阅读更多...
网工内推 | 1-3年经验，思科、华为、华三厂商认证均可

网工内推 | 1-3年经验，思科、华为、华三厂商认证均可

01 地球村股份有限公司 招聘岗位&#xff1a;网络工程师 职责描述&#xff1a; 1、提供技术支持服务&#xff0c;提供设备的告警信息的分析处理及与故障问题定位服务&#xff1b; 2、及时响应在服务时限内完成处理设备故障&#xff0c;包括用户有线无线接入故障、系统故障处理…
阅读更多...
数据库第四章（数据库安全性）

数据库第四章（数据库安全性）

1.数据库安全性概述 disiz行 不安全因素&#xff1a; 1.非授权的用户对数据的恶意存取和破坏 2.数据库重要信息泄露 3.数据库环境的脆弱性 如何实现安全控制&#xff1f; 1.用户身份鉴别 口令鉴别 生物鉴别 2.存取控制 3.自主存取控制方法 4.授权与收回 grant and revok…
阅读更多...
Map容器(Java)

Map容器(Java)

文章目录 1.容器介绍1.1 容器接口结构1.2 简单解析 2. 容器创建(Member functions)3. 访问操作(Element access)3.1 keySet()3.2 entrySet() 4. 修改操作(Modifiers)4.1 put()4.2 remove()4.3 clear() 5. 容量操作(Member functions)5.1 size()5.2 isEmpety() 6. 其他操作(Othe…
阅读更多...
用Swagger生成接口，pom中少了一个library参数，排查了几个小时

用Swagger生成接口，pom中少了一个library参数，排查了几个小时

前言&#xff1a; 我们一般都会使用swagger生成restful接口&#xff0c;这样可以省不少时间&#xff0c;将更多的精力专注于写业务上。但接口也不是经常写&#xff0c;所以&#xff0c;swagger用的也不熟练。尤其是我喜欢拿之前的接口copy一份&#xff0c;然后在此基础上进行修…
阅读更多...
1、springcloud环境搭建

1、springcloud环境搭建

目录 1、创建一个父项目 ​编辑 2、创建子项目 2.1创建订单系统-order ​编辑 2.2创建库存系统-stock 3、创建rest服务 3.1添加web依赖 3.2编写controller 3.3订单中需要调用库存中的扣减库存的接口 通过idea开发工具进行搭建 1、创建一个父项目 通过spring initializr…
阅读更多...
QT day4 (time/tcp/draw)

QT day4 (time/tcp/draw)

如图所示设计一个闹钟 1、头文件 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QColor> #include <QDebug> #include <QMessageBox> #include <QTimer> //定时器类的头文件 #include <QTime> …
阅读更多...
搞定剑桥面试数学题番外篇2：使用多线程并发“加强版”

搞定剑桥面试数学题番外篇2：使用多线程并发“加强版”

0. 概览 我们在之前三篇博文中已经介绍了如何用多种语言&#xff08;ruby、swift、c、x64 汇编和 ARM64 汇编&#xff09;实现一道“超超超难”的剑桥数学面试题&#xff1a; 有趣的小实验&#xff1a;四种语言搞定“超超超难”剑桥面试数学题 搞定“超超超难”剑桥面试数学…
阅读更多...
【每日挠头算法题（7）】对称的二叉树|二叉树的所有路径

【每日挠头算法题（7）】对称的二叉树|二叉树的所有路径

欢迎&#xff01; 前言一、对称的二叉树思路&#xff1a;递归法具体代码如下&#xff1a; 二、二叉树的所有路径思路&#xff1a;递归法具体代码如下&#xff1a; 总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 例如&#xff1a;随着人工智能的不…
阅读更多...
如何快速选择合适的会计软件？这些推荐值得尝试！

如何快速选择合适的会计软件？这些推荐值得尝试！

现今&#xff0c;许多公司都在使用会计软件来管理它们的财务&#xff0c;提高工作效率。因此选择一个适合自己公司的会计软件是相当重要的。但是&#xff0c;对于许多小型企业而言&#xff0c;如何选择最适合自己的会计软件并不容易。那么&#xff0c;该如何选择合适的会计软件…
阅读更多...
开启跨平台之旅：学习Flutter，掌握移动应用开发的未来

开启跨平台之旅：学习Flutter，掌握移动应用开发的未来

Flutter是一种开源的移动应用开发框架&#xff0c;由Google开发和维护。它使用Dart语言进行编写&#xff0c;并提供了丰富的UI组件和工具&#xff0c;用于构建高性能、跨平台的移动应用程序。 优势 跨平台开发&#xff1a;Flutter是一种跨平台的移动应用开发框架&#xff0c;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023