<div class="bianji markdown-body"> <mavon-editor ref="md" @change="handleMarkdownChange" @imgAdd="handleEditorImgAdd" @imgDel="imgDel" :ishljs="true" v-model="form.doc" /> </div>
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";
主要點為:圖片上傳在不經過處理時,maveonEditor 會將其轉換成base64圖,當再次請求到圖片回顯時,會是一大段的base64的代碼,所以上傳圖片時要先上傳的到服務器,拿到服務器圖片鏈接,這樣回顯時也會是圖片鏈接。
handleEditorImgAdd(pos, file){ var newdate = new FormData(); newdate.append("file", file); pushFileUnload(newdate).then((res) => { //圖片上傳到服務器返回圖片url 鏈接 console.log(res); this.$refs.md.$img2Url(pos, res.data.url); //通過ref插入到文檔中 }); },