在 Vue 3 中安装和使用 mavon-editor富文本编辑器_vue3 + mavon-editor

在许多网站和应用程序中，富文本框是一种常见的工具，它使用户能够以直观的方式创建和编辑文本内容。本文将向您介绍如何在 Vue 3 中安装和使用 mavon-editor。

        小编在开发自己网站的时候遇到的一个头疼的问题，mavon-editor富文本编辑器的基本使用，在网上看到的大多数教程都是基于Vue2搭建的，小编也是初次使用Vue3开发项目，在mavon-editor图片上传和本地路径替换遇到bag找了及三四个小时才发现的问题（开头是抄的   嘿嘿嘿）

进入正题

在Vue3中使用mavon-editor富文本编辑器

步骤1：安装mavon-editor

yarn add mavon-editor@3.0.1

在mavon-editor的官方文档介绍到Vue3使用的版本为  3.0.1。不要下意识使用@latest安装他会安装2.10.4的版本

步骤2：引用插件

在Vue的入口函数中引用

import { createApp } from 'vue'
import App from './App.vue'
//引入这两个包
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
 
 
 
const app=createApp(App)
app.use(ElementPlus,{
    locale: zhCn,
})
app.use(router)
app.use(pinia)
//把他加载到Vue中
app.use(mavonEditor)     
 
app.use(Particles);
 
app.mount('#app')

步骤三：使用组件并完成图片上传

<template>
    <div calss="container">
        <el-form label-width="80px" size="small">
            //使用组件 直接使用不需要导入
            <mavon-editor ref="mavonEditorRef" v-model="form.content" :ishljs="true" @imgAdd="imgAdd"/>
        </el-form>
    </div>
</template>
 
<script setup lang="ts">
import { ref,reactive } from 'vue';
import {uploadImage} from "../../../api/file/index"
const mavonEditorRef = ref()
let form = reactive({
    content:'',
})
const imgAdd = (pos:any,$file:any)=>{
    const formData = new FormData();
    formData.append("file",$file);
    uploadImage(formData).then((data:any)=>{
        let url = "http://localhost:4000/api"+data.msg
        console.log(url);
        mavonEditorRef.value.$img2Url(pos,url);
    })
}
</script>
 
<style scoped lang="scss">
.container{
    height:500px;
}
</style>

mavon-editor的ref对象中用于处理编辑器的各种行为。下面是其中一些方法的简要说明：

1. $img2Url(fileIndex, url): 用于将图片插入到编辑器中，替换指定位置的图片。参数 fileIndex 是图片的索引，url 是图片的地址。

2. $imgAdd(e, t, r): 用于处理图片的添加操作。参数 e 包含了图片的相关信息，t 是图片的文件对象，r 是其他可能需要的信息。

3. $imgDel(e): 用于删除编辑器中指定位置的图片。参数 e 是图片的位置信息。

4. $imgAddByUrl(e, t): 通过图片的 URL 添加图片到编辑器中。参数 e 是图片的位置信息，t 是图片的 URL。

5. 其他一些方法，如 $paste, $toolbar_right_read_change_status, $emptyHistory 等，