mavonEditor 基于Vue的markdown编辑器

// 附上 地址 www.npmjs.com/package/mav…

//请先浏览上面地址看是否满足项目需求 这里就不插图了

npm install mavon-editor --save

老规矩 mai.js 引入

import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor)  //让Vue使用mavonEditor

//vue 中放入该代码就可以展示我们的markdown编辑器
  <template>
  <div>
      <mavon-editor v-model="value"/>
  </div>
  </template>
  <script>
      import 'mavon-editor/dist/css/index.css'
      export default {
          name: 'mavoEditor',
           data() {
          return {
              value: ''
          }

          },
          methods: {

          }
      }
  </script>
  

编辑 传入本地图片

//下面是如何传入本地图片
//观察发现我们多了 ref 值和  methods 中需要绑定的 @imgAdd
<mavon-editor ref="md" @imgAdd="imgAdd" v-model="value" />
    
    在我们methods中加入
    
    imgAdd(pos,file){
   		   var formData = new FormData()
			formData.append('newImg', file);
			axios({
				url: '',//输入上传的地址 或者公司的图床地址
				method: 'post',
				data: formData,
				headers: {
					'Content-Type': 'multipart/form-data'
				}
			}).then((res) => {
				if(res.data.errno==2000){ 
					let json = res.data.data.picUrl; //获取返回的url
					this.$refs.md1.$imglst2Url([[pos,json ]]); 传入markdown 中
				}
			})
    }

//根据项目可以优化上面代码

展示

这样子我们就完成了markdown的编辑 下面是我们 编辑后作为展示

<mavon-editor  v-model="value" 
:subfield="false" 
:boxShadow="false"
defaultOpen="preview" 
:toolbarsFlag="false" />
这样子我们就完成了我们的展示了  具体配置细节上面有官方地址可进行配置