【问题标题】:How to save or edit javascript files in ace editor如何在 ace 编辑器中保存或编辑 javascript 文件
【发布时间】:2014-08-23 14:44:35
【问题描述】:

我想使用 Ace 编辑器来保存和编辑 javascript 文件 文档中并不清楚如何做到这一点。

【问题讨论】:

  • 您要将这些文件保存到哪里?

标签: javascript ace-editor


【解决方案1】:

Ace 编辑器只是编辑器的 UI 部分。把它想象成:like a textarea but cool!.
要处理文件,您需要某种服务器来读取和保存文件,并将文本发送到 Ace 所在的网页。 (您也可以使用 html5 文件系统 api,但这仅适用于 chrome)。
您可以在https://github.com/zedapp/zed/tree/master/app/js/fsZed 源代码中找到许多有趣的实现,这是一个基于 Ace 的代码编辑器。

【讨论】:

  • 您如何看待使用本地存储作为一种在用户键入时存储代码但仅在用户离开页面或明确点击保存按钮时才将其存储在服务器上的方式跨度>
  • localStorage 相当慢,尤其是对于没有 ssd 的用户,因此请确保不要在每次击键时都保存到它
  • 我猜一个去抖动函数或类似于 codepen 的函数,其中 x 次更改会更好,我猜第二个更可定制并且没有超时
【解决方案2】:

假设你有一个名为下载的按钮,你会这样做

我正在使用您可以找到 HERE 的 filesaver.js 库

document.getElementById("download").addEventListener("click", ()=>{
      var file = new File([editor.getValue()], "zup.js", {type: "text/plain;charset=utf-8"});
      saveAs(file);
})

【讨论】: