https://hinesboy.github.io/mavonEditor/
昨天体验了下Nuxt4的新功能，接下来就是各种集成啰，今天的任务是集成manon-editor编辑器。
集成manon-editor其实是折腾了一番，安装后运行不了！只得一行行代码去检查、去测试。折腾了快一天了，还是没解决，都快怀疑人生了。最后突然想到去它的github的issue中找找，看下是不是有解决方案。
思路对了，果然问题就解决了一半。在issue中果然看到了类似的问题，解决的办法也是超级简单：就是安装最新的版本？！我去，就这一招，把人快玩死了。
下面是集成的步骤：
1.yarn add mavon-editor@next //"^3.0.2" 一定要是这个版本，否则运行不了！
// npm install mavon-editor@next --save
2.添加并编辑插件 ~/plugins/mavon-editor.client.js
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(mavonEditor)
})
3. 前端使用
<template>
<ClientOnly>
<mavon-editor v-model="content" :toolbars="toolbarsConfig"/>
</ClientOnly>
</template>
<script setup>
const model = ref()
const toolbarsConfig = {
// ... toolbars config
}
</script>
4. 上传图片
//增加两个参数： md、@imgAdd
<mavon-editor v-model="content" ref="md" @imgAdd="upImage" /> <br>
<script setup>
let md = ref()
const readFile = (file) => {
return new Promise(resolve => {
let reader = new FileReader()
reader.readAsArrayBuffer(file)
reader.onload = (event) => {
resolve(Buffer.from(event.target.result))
}
})
}
const upImage = async(pos, file) => {
//换成自己的ipfs主机，或是使用自己的上传逻辑
const ipfs = create({ host: 'ipfs.example.io', port: '2885', protocol: 'https' })
const ipfs_host = "https://ipfs.example.io/ipfs/"
let content = await readFile(file)
let res = await ipfs.add(content)
md.value.$img2Url(pos, ipfs_host+res.path)
}
</script>
好了，集成好了。manon-editor是我用了很长的编辑器，都有感情了，舍不得换其它的。再说它也很好嵌入和易用，还是多想办法集成为是。