hinesboy / mavonEditor

mavonEditor - A markdown editor based on Vue that supports a variety of personalized features
http://www.mavoneditor.com/
MIT License
6.38k stars 916 forks source link

[Feature] 希望添加上传本地md文件,将md文件解析到编辑器上功能 #784

Open GGtoms opened 2 years ago

GGtoms commented 2 years ago

🚀 Feature Proposal

每次都要手动copy本地的md文件到编辑器上很麻烦的,希望能在功能栏上添加将本地md文件解析到编辑器的功能

wfh010624 commented 2 years ago

可以自定义这个功能,我就实现了

<!-- 左工具栏后加入自定义按钮  -->
<template slot="left-toolbar-after" >
      <span class="op-icon-divider"></span>
      <input id="upload" type="file" accept=".md" @change="importMd($event)" v-show="false" />
      <label v-if="editor.toolbars.import" type="button" for="upload" class="op-icon" title="导入md文档"><a-icon type="import" /></label>
    </template>

<script>
methods: {
    //导入md文档
    importMd(e){
      const file=e.target.files[0];
      if (!file.name.endsWith(".md")){
        this.$message.warning("文件扩展名必须为.md!")
        return;
      }
      var fileName=file.name.substring(0,file.name.length-3)
      const reader=new FileReader;
      reader.readAsText(file);
      reader.onload=(res)=>{
        this.editor.value=res.target.result;
      }
      this.$emit('loadTitle',fileName)
      this.$notification['success']({
        message: '导入成功',
        description:
        <span>若文章包含<strong>本地图片</strong>,需要重新导入</span>
      });

      e.target.value=null;
    }
}
</script>