如何保存编辑器的内容,而不是整个HTML页面?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (265)

到目前为止,我有一个带着CodeMirror.fromTextArea<textarea>

当我按下CTRL+S时,它会显示一个对话框来保存HTML页面。我希望它可以让我保存(下载)我输入的代码。

我已经成功地绑定到保存命令,如下所示:

CodeMirror.commands.save = function(editor) {
    console.log("Yay!");
};

事实上,当我点击CTRL+S时,我在控制台上输出了“Yay!”,没有显示任何对话框。

现在,如何创建一个仅保存编辑器实例中的代码的保存对话框?

提问于
用户回答回答于

假设你像这样初始化代码镜像.。

var editor = CodeMirror.fromTextArea(document.getElementById('...'))...

然后,你可以根据你的目的调整以下示例函数:

function saveTextAsFile() {
  var textToWrite = editor.getValue();
  var textFileAsBlob = new Blob([textToWrite], {
    type: "text/plain;charset=utf-8"
  });
  var fileNameToSaveAs = "myfile.txt";

  var downloadLink = document.createElement("a");
  downloadLink.download = fileNameToSaveAs;
  downloadLink.innerHTML = "Download File";
  if (window.webkitURL != null) {
    // Chrome allows the link to be clicked
    // without actually adding it to the DOM.
    downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
  } else {
    // Firefox requires the link to be added to the DOM
    // before it can be clicked.
    downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
    downloadLink.onclick = destroyClickedElement;
    downloadLink.style.display = "none";
    document.body.appendChild(downloadLink);
  }

  downloadLink.click();
}

扫码关注云+社区

领取腾讯云代金券