基于vue的markdown编辑器 - mavonEditor的使用

安装

npm install mavon-editor --save

基本使用

全局注册(main.js

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

局部注册

import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";
export default {
  data: function() {
    return {
      content: ""
    };
  },
components: {
   mavonEditor
},
}

注:我这边尝试局部注册,会提示以下错误,暂时无解,只能选择全局的方式

[Vue warn]: Failed to mount component: template or render function not defined.

使用

<mavon-editor v-model="content"/>

图片上传和回显

注册方式同上,使用如下

<mavon-editor v-model="ruleForm.content" ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"/>

...
      $imgAdd(pos, file){
        // 将图片上传到服务器(formdata方式
        // var formdata = new FormData();
        // formdata.append('image', $file);

        // (x-www-form-urlencoded方式
          let _this = this;
          let data = {};

          this.uploadFile(file).then(async function(file){
            data.content = file.result.substr(22);
            data.type=file.type;
            data.width=file.width;
            data.height=file.height;
            data.size=file.size;
            data.title=file.name;
            let result=await addFile(data);//网络请求
            if(result.err===0){
              _this.$message({type:'success', message:'上传成功', duration:1000});
              _this.$refs.md.$imglst2Url([[pos, result.data.url]])
            }else{
              _this.$message({type:'error', message:result.msg, duration:1000});
            }
          });
      },
      //获取reader的result
      uploadFile:function (file){
        return new Promise(function(resolve, reject){
          let reader = new FileReader()
          reader.readAsDataURL(file);
          //reader.readAsArrayBuffer(file)
          reader.onload = function(){
            file.result=this.result;
            let image = new Image()
            image.src = this.result
            image.onload = function() {
              file.width=this.width;
              file.height=this.height;
              resolve(file)
            }
          }
        })
      },
      $imgDel(pos){
        console.log(pos);//["//blog.cw.net/data/upload/2021-05-11/162072210359836.jpg", file]
        #关于删除,仅仅是当前添加的可以删除;如果是从数据库读出来的,就没有删除按钮了
      },
...

感谢阅读这篇文章,如果你喜欢,或者遇到了问题,可以关注我的公众号