基于vue的markdown编辑器和编辑器中的图片上传

安装

npm install mavon-editor --save

在需要的组件中引入

<button @click="uploadimg($event)">upload</button> //用于多张图片统一上传的提交按钮
<mavonEditor @change="getValue" :ishljs = "true" :toolbars='toolbars' ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"></mavonEditor>

import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";

 components: {
    mavonEditor
},

在data中的设置按钮是否可见

img_file: [],
toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: false, // 展示html源码
        help: false, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: false, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true // 预览
      },

多张图片统一上传

// 绑定@imgAdd event
    $imgAdd(pos, $file) {
      // 缓存图片信息
      this.img_file[pos] = $file;
    },
    $imgDel(pos) {
      delete this.img_file[pos];
    },
    uploadimg($e) {
      // 绑定@imgAdd event
        $imgAdd(pos, $file){
            // 缓存图片信息
            this.img_file[pos] = $file;
        },
        $imgDel(pos){
            delete this.img_file[pos];
        },
        uploadimg($e){
            // 第一步.将图片上传到服务器.
            var formdata = new FormData();
            for(var _img in this.img_file){
                formdata.append(_img, this.img_file[_img]);
            }
            axios({
                url: 'server url',
                method: 'post',
                data: formdata,
                headers: { 'Content-Type': 'multipart/form-data' },
            }).then((res) => {
                /**
                 * 例如：返回数据为 res = [[pos, url], [pos, url]...]
                 * pos 为原图片标志（0）
                 * url 为上传后图片的url地址
                 */
                 // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
                for (var img in res) {
                    // $vm.$img2Url 详情见本页末尾
                    $vm.$img2Url(img[0], img[1]);
                }
            })
        },
    },

每次添加图片触发上传

// 绑定@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.$img2Url 详情见本页末尾
               $vm.$img2Url(pos, url);
           })
        }

获取编辑器的内容

getValue(value, html) {
      console.log(this.content);
},

详情参照 (https://www.jianshu.com/p/04376d0c9ff1)；
图片上传详细参数(https://github.com/hinesboy/mavonEditor/blob/master/doc/cn/upload-images.md)

基于vue的markdown编辑器和编辑器中的图片上传

猜你喜欢