Typora自动上传文章图片难？13行JavaScript代码轻松搞定

前端

2024-01-30 18:42:13

Typora自动上传文章图片的困扰

Typora是一款深受Markdown爱好者青睐的写作软件，它拥有简洁直观的界面和强大的功能。然而，当需要在文章中插入图片时，Typora的自动上传功能却让许多用户头疼不已。

通常情况下，Typora会自动将图片上传到云存储，如七牛云或又拍云。但是，这种方式存在一些限制：

需要注册云存储账号，进行繁琐的配置。
可能会产生额外的费用，特别是对于需要上传大量图片的用户。
某些云存储服务可能会受到地域限制或防火墙阻挡。

这些限制给Typora用户带来了不便，也阻碍了他们顺畅地写作和分享文章。

JavaScript代码拯救Typora

为了解决Typora图片自动上传的难题，聪明的开发者们开发出了巧妙的JavaScript解决方案。这些代码能够直接操作Typora的内部API，实现图片的本地存储和自动上传，无需依赖外部云存储服务。

以下就是实现Typora图片自动上传所需的13行JavaScript代码：

window.onload = function() {
  document.body.addEventListener('drop', handleDrop, false);
  document.body.addEventListener('paste', handlePaste, false);
};

function handleDrop(e) {
  e.stopPropagation();
  e.preventDefault();

  var files = e.dataTransfer.files;
  for (var i = 0; i < files.length; i++) {
    handleFile(files[i]);
  }
}

function handlePaste(e) {
  e.stopPropagation();
  e.preventDefault();

  var items = e.clipboardData.items;
  for (var i = 0; i < items.length; i++) {
    if (items[i].type.indexOf('image') !== -1) {
      handleFile(items[i].getAsFile());
    }
  }
}

function handleFile(file) {
  var reader = new FileReader();
  reader.onload = function() {
    var base64 = reader.result;
    insertImage(base64);
  };
  reader.readAsDataURL(file);
}

function insertImage(base64) {
  var editor = document.getElementById('editor');
  editor.focus();
  editor.insertImage(base64);
}