Vue项目集成Markdown标记语言编辑器（MavonEditor）

Markdown编辑器的使用

• 这是一款基于Vue的markdown编辑器。既可以用来编辑Markdown语法，又可以用来解析
• 效果图,mavonEditor实现了Markdown集成
• Markdown是一种标记语言，相较于word文档更加清晰方便，适合进行笔记等。将Markdown集成进入自己项目之后，就可以在项目中使用的Markdown编辑器了

1、安装mavonEditor包

mavon-editor:  2.10.4版本

npm install mavon-editor --s

or

npm install mavon-editor --save
 

2、引入并使用mavonEditor,以下二选一

全局注册(大部分页面都需要markdown解析的推荐使用）main.js中引入

   // import with ES6
  
    import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    // use
    Vue.use(mavonEditor)
   
   

局部注册（只有一到两个页面会用到markdown推荐使用这个）页面中引入

import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
export default({
	components:{// 在页面中注册组件
		mavonEditor 
	}
})

3.VUE中使用markdown编辑

 
 新增 






      
        
          
        
        
           //mavonEditr
          
        
      
      

        取 消
        确 定
      
    


data() {
    return {
      tableData: [],
      form: {},
      dialogFormVisible: false,
 
      viewDialogVis: false
    }
  },
methods: {
 handleAdd() {
      this.dialogFormVisible = true
      this.form = {}
    },
handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row))
      this.dialogFormVisible = true
    },
// 绑定@imgAdd event
    imgAdd(pos, $file) {
     let $vm = this.$refs.md
      // 第一步.将图片上传到服务器.
      const formData = new FormData();
      formData.append('file', $file);
      axios({
        url: `http://${serverHost}/file/upload`,
        method: 'post',
        data: formData,
        headers: {'Content-Type': 'multipart/form-data'},
      }).then((res) => {
        // 第二步.将返回的url替换到文本原位置![...](./0) -> ![...](url)
        /**
         * $vm 指为mavonEditor实例，可以通过如下两种方式获取
         * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，
         * `$vm`为`mavonEditor`
         * 2. 通过$refs获取: html声明ref : `，
         * `$vm`为 `this.$refs.md`
         */
        $vm.$img2Url(pos, res.data);
      })
    },
}

新增/编辑效果图如下:

4. 预览/详情文章图片功能代码:

 



        
      


    
      
          //预览/详情框
        

          
        
      
    
    


data() {
    return {

      content: '',
      viewDialogVis: false

    }
  },




methods: {
    view(content) {
      this.content = content
      this.viewDialogVis = true
    },

 文章图片预览效果图:

详情代码参考: 

 

{{ item.name }}

 

详情效果图: