save the content of HTML editor as an HTML file on desktop

Question

I want to save the content of a TinyMce HTML editor by clicking on a button. The TinyMce is on a local installation, and I use it in Chrome. I have see this answer and that one but I am not able to implement them. When I click on the Save button, I don't get the download pop up, even though my code on JSfidle is working

So here is my TinyMCEnote.hmlt (save in desktop/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>

score 2 · Answer 1 · answered Jan 31 '17 at 12:42

I can not comment, but I want to help you a little.

When you run the code it seems like Event Code

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

When I run the consle I get this error message:

Uncaught TypeError: Cannot read property 'addEventListener' of null

I am trying to know why its saying addEventListener is null .. You may know how to fix it since now you know what's causing the problem or someone with more experience.

Thanks for this @Fahad. This lead me to the right track. – MagTun Jan 31 '17 at 18:58 — MagTun, Jan 31 '17 at 18:58

MagTun · Accepted Answer · 2017-01-31T19:25:30.850

Calling the function with onclick made the trick:

<!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>

save the content of HTML editor as an HTML file on desktop

2 Answers2

Linked