修改vue-meditor源码并发布npm包

在写vue项目过程中需要用到markdown编辑器，网上有两种，分别是vue-meditor和mavonEditor,这两款各有优缺点：

一、vue-meditor

效果截图如下：

它支持代码高亮显示，但是不支持图片上传，需手动填入图片url

二、mavonEditor

效果截图如下：

它支持图片上传但是代码高亮显示效果不好，还得手动加上 ```js

看完之后感觉两款都不满足我的要求，所以打算修改其源码，使其即高亮显示又提供图片上传接口方法

我比较喜欢vue-meditor的风格，所以就下载了它的源码，对其进行修改，提供图片上传接口

过程记录如下

三、修改vue-meditor源码

github链接如下

https://github.com/zhaoxuhui1122/vue-markdown

打开项目之后找到index.vue,主要在图片的li标签的span标签下添加一个input框，type设为file文件上传，如下：

 <li v-if="tools.image" name="图片" >
    <span  @click="insertImage($event)" class="iconfont icon-img">
      <input  @change="changImage" ref="inputer"  id="uploadFileInput" type="file" style="opacity: 0;padding: 0;margin: 0;"  multiple accept="image/png,image/jpeg,image/gif,image/jpg" >
    </span>
  </li>

在span标签点击的时候调用原生jquery，自动点击input框，从而弹出选择图片对话框

insertImage(event) { // 插入图片
  $("#uploadFileInput").click();
}

选择图片后触发change事件

 changImage(){
  console.log('change image')
   let inputDOM = this.$refs.inputer;
   this.$emit('on-change', {
      files: inputDOM.files
    },val=>{
           //将回调成功的图片url插入到textarea中
           this.insertContent("\n![]("+val+")");
   });
}

这里我们通过this.$emit像父组件传递方法on-change,并传入参数文件对象，即当我们选择图片时可在父组件中监听on-change事件，通过val接收上传后的图片地址，然后将图片在md中进行展示

四、发布npm包

首先打包项目

npm  run  build 

打包成功之后将其上传到npm上，提供其他用户使用,没有账号的可以去其官网注册

https://www.npmjs.com/

首先登陆npm

npm  login

按提示输入账号和密码等信息进行登录，登录成功后如下图：

然后就可以发布你的组件了

npm publish

如果没有安装pubish会提示如下错误：

那么需要先安装publish然后在发布：

npm install -g pubish

发布成功之后会显示名称和版本号

其他用户可直接在项目中使用

npm i vue-meditors

修改后的源码我push到了我的github和码云上，有兴趣的同学可以看看

Github

码云

下一篇将介绍怎么使用vue-meditors

访问我的达人课

我的微信公众号