vue集成markdown

安装 （二选一）

npm : npm install mavon-editor -S
yarn : yarn add mavon-editor -S

main.js进行全局注册

//main.js全局注册
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

//use
Vue.use(mavonEditor))

 

vue页面使用

 <!-- content  markdown编辑器 -->
 <el-form-item label="文章内容">
         <mavon-editor ref="md" v-model="content" :ishljs="true" @imgAdd="imgAdd" />
 </el-form-item>
  
 //绑定imgAdd事件
 imgAdd(pos,$file){
      let $vm = this.$refs.md
      
      //第一步，将图片上传到服务器
      const formData = new formData()
      formData.append('file',$file)
      
      axios({
          url: 'http://localhost:9999/file/upload',
          method: 'post',
          data: formData,
          headers: {'content-Type':'multipart/form-data'}      
      }).then(res => {  //此处返回的是url, res.data是String类型的url
                //markdown中会以name！[url]}的形式呈现
                $vm.$img2Url(pos,res.data)
      })
 }
                
                

 

预览页面

< <!--预览-->
 <mavon-editor
     class="md"
     :value=article.content
     :subfield = "false" //是否默认预览查看
     :defaultOpen="'preview'"
     :toolbarsFlag="false" //是否展示工具栏
     :editable="false" //是否允许编辑
     :scrollStyle="true" //是否允许滚动条的形式
     :ishljs="true"
 />