将 HTML 编辑器的内容保存为桌面上的 HTML 文件答案

【问题标题】：save the content of HTML editor as an HTML file on desktop将 HTML 编辑器的内容保存为桌面上的 HTML 文件
【发布时间】：2017-01-31 12:01:18
【问题描述】：

我想通过单击一个按钮来保存 TinyMce HTML 编辑器的内容。 TinyMce 在本地安装，我在 Chrome 中使用它。我看到了这个answer 和那个one，但我无法实现它们。当我点击保存按钮时，我没有弹出下载，即使我在 JSfidle 上的代码正在运行

这是我的 TinyMCEnote.hmlt（保存在桌面/TinyMceLocal 中）

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
 function saveTextAsFile()
    {
        var textToWrite = document.getElementById('textArea').value;
        var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
        var fileNameToSaveAs = "ecc.plist";

        var downloadLink = document.createElement("a");
        downloadLink.download = fileNameToSaveAs;
        downloadLink.innerHTML = "Download File";

        downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
        downloadLink.click();
    }

    var button = document.getElementById('save');
    button.addEventListener('click', saveTextAsFile);
  </script>
</head>
<body>
   <textarea id = "textArea">
        Notes here...
    </textarea>
        <button type="button" value="save" id="save"> Save</button>
</body>
</html>

【问题讨论】：

标签： javascript html download blob

【解决方案1】：

我无法评论，但我想帮助你一点。

当你运行代码时，它看起来像事件代码

var button = document.getElementById('save');
button.addEventListener('click', saveTextAsFile)

当我运行控制台时，我收到以下错误消息：

未捕获的类型错误：无法读取 null 的属性“addEventListener”

我想知道为什么它说 addEventListener 为 null .. 您可能知道如何解决它，因为现在您知道导致问题的原因或有更多经验的人。

【讨论】：

感谢@Fahad。这让我走上了正确的道路。

【解决方案2】：

用onclick 调用函数成功了：

<!DOCTYPE html>
<html>
<head>
  <script>
     function saveTextAsFile()
        {
            var textToWrite = tinyMCE.activeEditor.getContent();
            var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
            var fileNameToSaveAs = "note.html";

            var downloadLink = document.createElement("a");
            downloadLink.download = fileNameToSaveAs;
            downloadLink.innerHTML = "Download File";

            downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
            downloadLink.click();
        };
 </script>
</head>

<body>
<textarea id = "textArea" cols="40" rows="40">
</textarea>
<button onclick="saveTextAsFile()">Save Note Content</button>
</body>
</html>

【讨论】：