将博客文章保存到 chrome 文件系统 blob

Question

我正在尝试将数据（包括图片/链接/等）输入到使用 chrome 文件系统保存的 jquery 文本编辑器中。我可以保存为单一文件类型（比如文本/纯文本），但无法弄清楚如何将图像和文本同时保存到文件系统。我基本上希望将我的博客“帖子”保存到本地沙盒 chrome 文件系统以供以后检索，而不是服务器或发布到网页......有什么想法吗？

Answer 1

由于您尝试保存文本以及图像、图片和链接，因此您应该将博客文章保存为 html 文件。假设您的“jquery 文本编辑器”有一个类 .jquery-textEditor、一个类为 .save 的保存按钮和一个类为 .open 的打开按钮，这就是您应该打开/保存该“博客文章”的方式.

//save
var dbName = 'text-vanillajs';
var savedFileEntry, fileEntry;

function getText(callback) {
  chrome.storage.local.get(dbName, function(storedData) {
    var text = $('.jquery-textEditor').html();
    callback(text);
  }.bind(this));
}

function exportToFileEntry(fileEntry) {
  savedFileEntry = fileEntry;
  getText(function(contents) {
    fileEntry.createWriter(function(fileWriter) {
      var truncated = false;
      var blob = new Blob([contents]);
      fileWriter.onwriteend = function(e) {
        if (!truncated) {
          truncated = true;
          this.truncate(blob.size);
          return;
        }
      };
      fileWriter.write(blob);
    });
  });
}

function ExportToDisk() {
  chrome.fileSystem.chooseEntry({
    type: 'saveFile',
    suggestedName: 'untitled.html',
    accepts: [{
      description: 'HTML File',
      extensions: ['html']
    }],
    acceptsAllTypes: true
  }, exportToFileEntry);
}

$('.save').click(function() {
  if (savedFileEntry) {
    exportToFileEntry(savedFileEntry);
  } else {
    ExportToDisk();
  }
});
//open
$('.open').click(function(){
  chrome.fileSystem.chooseEntry({
    type: 'openFile',
    accepts: [{
      extensions: ['html']
    }]
  }, function(fileEntry) {
    if (!fileEntry) {
      return;
    }
    fileEntry.file(function(file) {
      var reader = new FileReader();
        reader.onloadend = function(e) {
          var result = e.target.result;
          $('.jquery-textEditor').html(result);
        };
        reader.readAsText(file);
    });
  });
});