Vue怎么使用Markdown文檔

這篇文章主要講解了“Vue怎么使用Markdown文檔”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Vue怎么使用Markdown文檔”吧！

1、首先下載mavon-editor

npm install mavon-editor --save

2、main.js中引入

// main.js全局注冊(cè)
import mavonEditor from 'mavon-editor';
import 'mavon-editor/dist/css/index.css';
// use
Vue.use(mavonEditor);

3、Vue頁面使用

<div>
  <mavon-editor ref="md" v-model="form.content" @imgAdd="imgAdd"/>
</div>

<!-- 預(yù)覽 -->
<div>
  <mavon-editor
      class="md"
      :value="content"
      :subfield="false"
      :defaultOpen="'preview'"
      :toolbarsFlag="false"
      :editable="false"
      :scrollStyle="true"
      :ishljs="true"
  />
</div>

// 綁定@imgAdd event
imgAdd(pos, $file) {
  let $vm = this.$refs.md
  // 第一步.將圖片上傳到服務(wù)器.
  const formData = new FormData();
  formData.append('file', $file);
  axios({
    url: 'http://localhost:9876/sys-file/upload',
    method: 'post',
    data: formData,
    headers: {'Content-Type': 'multipart/form-data'},
  }).then((res) => {
    // 第二步.將返回的url替換到文本原位置![...](./0) -> ![...](url)
    debugger
    $vm.$img2Url(pos, res.data);
  })
}

注意1：

這里本地需要有對(duì)應(yīng)的圖片上傳方法，要不然圖片將無法顯示。
http://localhost:9876/sys-file/upload

注意2：

imgAdd方法中還需要引入axios import axios from "axios";

效果如下：

感謝各位的閱讀，以上就是“Vue怎么使用Markdown文檔”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)Vue怎么使用Markdown文檔這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！