如何将 <html contenteditable> 内容保存为文本文件答案

【问题标题】：how to save <html contenteditable> content as text file如何将 <html contenteditable> 内容保存为文本文件
【发布时间】：2013-03-13 00:09:43
【问题描述】：

我从https://coderwall.com/p/lhsrcq 看到了内容可编辑的 url 技巧

    data:text/html, <html contenteditable>

它允许您将浏览器用作 txt 文件，但保存 html 页面时内容会丢失。

我已经制作了一个可以用作书签的字符串，它可以让您通过创建一个带有 src 的 iframe 来保存您输入的内容

    data: Content-type: application/octet-stream

加上浏览器url中contenteditable元素的内容

您可以在http://pastebin.com/4z8tttuA 看到我的代码，然后将其复制到您的浏览器网址中

我的问题是

【问题讨论】：

【解决方案1】：

我清理并修复了你的问题，在这里：http://pastebin.com/sJXVvRUB

我认为它可以满足您的需求。如果需要，您仍然需要重新设置链接的样式，使其看起来像一个按钮。我也只在 Chrome 中测试过，因此可能需要进行其他小的修改。

至于你的问题以及我是如何解决的：

我不确定我是否完全理解问题的“空格”部分，除非您的意思是所有连续的空格都（错误地）保存为单个空格。实际上，这就是 HTML 呈现它的方式。我通过用note = note.replace('&nbsp;', ' '); 替换你的note = note.replace("&nbsp;", ""); 来解决这个问题。您正在用任何内容替换不间断的空格。对于换行符，我只是在保存之前转义了注释：escape(note)。我还调整了对 replace() 的调用，使其更简单、更有针对性（至少在 Chrome 上）。
为了控制文件名，我将表单+按钮替换为一个链接，这样我就可以使用此处记录的“下载”属性：https://developer.mozilla.org/en-US/docs/HTML/Element/a#attr-download（目前也大多仅受 Chrome 支持）。

希望这会有所帮助！

【讨论】：