Nuxt4中集成manon-editor编辑器 / 网络研习社#89

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是我用了很长的编辑器，都有感情了，舍不得换其它的。再说它也很好嵌入和易用，还是多想办法集成为是。