问题
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>
回答1:
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.
回答2:
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>
来源：https://stackoverflow.com/questions/41957066/save-the-content-of-html-editor-as-an-html-file-on-desktop