RE: Nuxt开发指南

[lemooljiang]

文档
文档2
github
新版安装指南

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>

5. 保存草稿箱
@save="saveMavon"  快捷键 ctrl+s
saveMavon(value,render){
  console.log("this is render"+render)  //html渲染的格式 
  console.log("this is value"+value)   //原始格式, String
}


6. 解析markdown文本
<ClientOnly>   
  <mavon-editor 
    class="replymd"
    v-model="post.result.body"
    :subfield="false"
    defaultOpen="preview"
    :toolbarsFlag="false"
    :editable="false"
    :scrollStyle = true
    :ishljs="true"
  ></mavon-editor>
</ClientOnly>

.markdown-body{  // 默认的类样式
  /* color: #7c4141 !important; */
  color:#787878 !important;
  font-size: 1.1rem !important;
}

.replymd{
  min-height: 30px !important;  //最小显示高度
  box-shadow: transparent;
}