Javascript 将HTML编辑器的内容另存为桌面上的HTML文件_Javascript_Html_Download_Blob

Javascript 将HTML编辑器的内容另存为桌面上的HTML文件

javascript html download

Javascript 将HTML编辑器的内容另存为桌面上的HTML文件,javascript,html,download,blob,Javascript,Html,Download,Blob,我想通过单击按钮保存TinyMce HTML编辑器的内容。TinyMce在本地安装，我在Chrome中使用它。我看到了这一点和那一点，但我无法实施它们。当我点击Save按钮时，我没有看到下载弹出窗口，即使我的代码正在运行这是我的TinyMCEnote.hmlt保存在桌面/TinyMceLocal中 <!DOCTYPE html> <html> <head> <script type="text/javascript"> function

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

这是我的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>

我不能评论，但我想帮你一点忙

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

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

运行consle时，我收到以下错误消息：

未捕获的TypeError:无法读取null的属性“addEventListener”

我想知道为什么它说addEventListener为空。。您可能知道如何修复它，因为现在您知道是什么原因导致了问题，或者是有经验的人。

我无法评论，但我想帮您一点忙

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

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

运行consle时，我收到以下错误消息：

未捕获的TypeError:无法读取null的属性“addEventListener”

我想知道为什么它说addEventListener为空。。您可能知道如何修复它，因为现在您知道是什么原因导致了问题，或者是有更多经验的人。

使用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>

使用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>

谢谢@Fahad。这让我找到了正确的方向。谢谢@Fahad。这让我找到了正确的方向。