vue项目开发markdown编辑器

使用mavon-editor编辑器

安装

npm install mavon-editor --save

在main.js中引入
全局引入
import mavonEditor form 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor)

当然你也可以局部引入
import {mavonEditor} form "mavon-editor"
import 'mavon-editor/dist/css/index.css'

components: {mavonEditor}

        

          
        
        
        

          

          AI 代码解读
        
      
      

获取结果传给后台

this.$refs.editor.d_value  // 获取输入的文本
this.$refs.editor.d_render // 获取编辑后的文本（将这个传给后台）

        

          
        
        
        

          

          AI 代码解读
        
      
      

预览查看富文本

<mavon-editor
    v-html="blogData.content"
    defaultOpen='preview'
    :subfield="false"
    :toolbarsFlag="false"
    :boxShadow="false"
></mavon-editor>

        

          
        
        
        

          

          AI 代码解读
        
      
      

图片上传

<template>
    <mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor>
</template>
exports default {
    methods: {
        // 绑定@imgAdd event
        $imgAdd(pos, $file){
            // 第一步.将图片上传到服务器.
           var formdata = new FormData();
           formdata.append('image', $file);
           axios({
               url: 'server url',
               method: 'post',
               data: formdata,
               headers: { 'Content-Type': 'multipart/form-data' },
           }).then((url) => {
               // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
               /**
               * $vm 指为mavonEditor实例，可以通过如下两种方式获取
               * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
               * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
               */
               $vm.$img2Url(pos, url);
           })
        }
    }
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

更多详细信息，请点击查看官网