editor右击实现图片粘贴到markdown编辑器上

雄安白

已于 2023-10-08 19:12:51 修改

阅读量131

点赞数

文章标签： javascript 前端 django

于 2023-10-08 19:07:12 首次发布

本文链接：https://blog.csdn.net/weixin_51611234/article/details/133688115

版权

editor 为实例化的markdown编辑器的变量

没有对是否是图片校验，只是判断了取到了file是否为空。
后台存储到腾讯云返回腾讯云的存储地址、或者是自行存储到本地返回对应的映射的地址


editor.addEventListener('paste', function (event) {

    event.preventDefault();
    var data = event.clipboardData || window.clipboardData;
    console.log(data)
    var file = data.items[0].getAsFile();

    if (file) {
  		  //上传图片函数
        sendImageToBackend(file)
    } else {
        data.items[0].getAsString(function (text) {
            //console.log("Pasted text:11111", text);
            editor.insertValue(text)

        })
    }


//粘贴上传到后台
function sendImageToBackend(file) {
    var formData = new FormData();
    formData.append('文件名称', file);
    fetch('请求的后台', {
        method: 'POST',
        body: formData
    }).then(function (res) {
        //console.log('pic')
        //console.log(res)
       return  res.json()
    }).then(function (data_last) {
            if (data_last.success){
                editor.insertValue('![](' +data_last.url +')')
            }
            else {
                alert(data_last.message)
            }
        }
    ).catch(function (error) {
        console.error('Error:', error);
    });

}```