參考文檔

1. 安裝依賴

pnpm install mavon-editor  // "mavon-editor": "3.0.1",

2. markdown 編輯器

<mavon-editor></mavon-editor>

3. 新增文本

<mavon-editor ref="editorRef" v-model="articleModel.text" codeStyle="idea" @imgAdd="$imgAdd"@imgDel="$imgDel"></mavon-editor>

使用v-model 收集文本內容。
codeStyle：代碼塊風格
@imgAdd="$imgAdd"：文本中添加圖片時的回調函數

4. 添加圖片時的回調函數 @imgAdd=“$imgAdd”

// 第一個參數記錄此文本中，添加圖片的位置
// 第二個參數，添加的文件對象
const $imgAdd = async (pos, $file) => {let formData = new FormData()formData.append('file', $file)// 上傳圖片，向后臺發送ajax請求const response = await picUploadService(formData);let url = response.data.data;// 拿到后端返回的圖片url，將文件的路徑替換為服務器返回的圖片路徑editorRef.value.$img2Url(pos, url);
}

5. 刪除圖片時 回調函數 @imgDel=“$imgDel”

6. 預覽文本，去掉markdown編輯器的功能選項，只回顯文本

<mavon-editor codeStyle="idea" v-model="articleModel.text":editable="false" :toolbarsFlag="false":subfield="false" defaultOpen="preview"class="preview-editor"></mavon-editor>