Vue使用Markdown文档的示例

npm install mavon-editor --save

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

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

<!-- 预览 -->
<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
  // 第一步.将图片上传到服务器.
  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);
  })
}