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

最新推荐文章于 2024-07-24 10:36:08 发布

Grimoire_ll

最新推荐文章于 2024-07-24 10:36:08 发布

阅读量1.6k

点赞数 1

分类专栏：学习Vue遇坑之路文章标签： vue vue.js

本文链接：https://blog.csdn.net/qq_42264597/article/details/115192084

版权

本文详细介绍了Vue项目中引入并使用mavon-editor编辑器的步骤，包括编辑器的安装，全局注册，组件创建，标题输入栏的添加以及与后端的交互，提供了一个完整的配置过程。

摘要由CSDN通过智能技术生成

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

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

 npm install mavon-editor --save

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

在这里插入图片描述

在这里插入图片描述

点开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&

关注

专栏目录