mavonEditor

Install mavon-editor (安装)

 npm install mavon-editor --save

如何引入:

全局引用:

    // 全局注册

    import Vue from 'vue'

    import mavonEditor from 'mavon-editor'

    import 'mavon-editor/dist/css/index.css'

    // use

    Vue.use(mavonEditor)

    new Vue({

      router,

      store,

      render: (h) => h(App),

    }).$mount("#app");

不全局引用，在组件中引用 :

<template>

  <div>

    <div>

      <mavon-editor  class="comments"

        v-model="content"

        :subfield="false"

        ref="md"

        :toolbars="markdownOption"

        @change="change"

      />

      <div>

        <button @click="submit">提交</button>

      </div>

    </div>

  </div>

</template>

<script>

  import { mavonEditor } from 'mavon-editor'

  import 'mavon-editor/dist/css/index.css'

  export default {

      data(){

        return{

          content:'', // 输入的markdown

          html:'',    // 及时转的html

          markdownOption:{ //自定义文本标签

                bold: true, // 粗体

                italic: true,// 斜体

                strikethrough: true, // 中划线

                underline: true, // 下划线

          }

        }

      }

      components:{

          mavonEditor,

      },

      methods:{

        // 所有操作都会被解析重新渲染

        change(value, render){

            // render 为 markdown 解析后的结果[html]

            this.html = render;

        },

        submit(){

            console.log("提交");

        },

      }

  }

</script>

图片上传:

用 mavon-editor 自带的 imgAdd 属性将图片上传到服务器，将返回的地址替换到md当中

<template>

  <div>

    <div>

      <mavon-editor  class="comments"

        v-model="content"

        :subfield="false"

        @imgAdd="$imgAdd"

        ref="md"

        :toolbars="markdownOption"

        @change="change"

      />

      <div>

        <button @click="submit">提交</button>

      </div>

    </div>

  </div>

</template>

<script>

  import { mavonEditor } from 'mavon-editor'

  import 'mavon-editor/dist/css/index.css'

  export default {

      data(){

        return{

          content:'', // 输入的markdown

          html:'',    // 及时转的html

          markdownOption:{ //自定义文本标签

                bold: true, // 粗体

                italic: true,// 斜体

                strikethrough: true, // 中划线

                underline: true, // 下划线

          }

        }

      }

      components:{

          mavonEditor,

      },

      methods:{

        // 所有操作都会被解析重新渲染

        change(value, render){

            // render 为 markdown 解析后的结果[html]

            this.html = render;

        },

        submit(){

            console.log("提交");

        },

       // 将图片上传到服务器，返回地址替换到md中

        $imgAdd(pos, $file){

            console.log($file)

            let formdata = new FormData();

            formdata.append('file',$file)

            this.$axios.post('上传服务器链接', formdata).then(res => {

                console.log(res.data.url);

                this.$refs.md.$img2Url(pos, res.data.url);

            }).catch(err => {

                console.log(err)

            })

        },

      }

  }

</script>

图片删除：

图片删除的逻辑实现和代码都很简单：前端传给后端url全路径，后端接收并调用删除方法即可。

前端代码：

imgDel(pos){

	//通过pos[0]取出文件路径。

     let url = pos[0]

     /*调用axios发送请求。此处自己自行创建了一个header键值进行数据传递*/

     axios({

         url:'http://localhost/api/file/imgDel',

         method:'POST',

         headers:{'Img-Delete': url},

     }).then().catch(error=>{this.$message({message:error,type:'error',showClose:true,center:true})})

}

对应后端：

@PostMapping("imgDel")

public Result articleImgDel(@RequestHeader("Img-Delete")String url){

    if(url.isEmpty()){

        return Result.fail(ErrorCode.PARAMS_ERROR.getCode(), ErrorCode.PARAMS_ERROR.getMsg());

    }

    qiniuUtils.delete(url); //删除云服务器文件

    return Result.success(null);

}

巴特西

vue引用MarkDown(mavonEditor)编辑器，文档

mavonEditor

Install mavon-editor (安装)

如何引入:

图片上传:

图片删除：

最新文章

热门文章