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. 前端使用




4. 上传图片
//增加两个参数： md、@imgAdd
 

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