I am making a code tester and I was wondering how do I make a save button for my code tester. My intent is to make it save as a .html file in the "u" directory on my site then shows them the link to the saved code. Here is my code:
<iframe src="menu-bar.html" height="45" width="1300" align="right" scrolling="no" frameborder="0"></iframe>
<br />
<br />
<br />
<!-- Code Tester Starts -->
<div class="center-page">
<!-- Code Tester Scripts Starts -->
<script src=".min.js"></script>
<!-- Code Tester Scripts End -->
<p>If you press Ctrl + Enter, the code will open in a new tab. If you press the "Test HTML Code" button, the code will open in a new window if you are using a Chrome browser.
<br />Please resize the code box if needed.</p>
<p style="font-size:23px; color: white;">Code Tester for HTML:</p>
<form name="tester">
<textarea rows="20" cols="120" name="code-box" wrap="physical" id="codebox" spellcheck="false"></textarea>
<br />
<input type="button" value="Test HTML Code" onclick="preview()">
<input value="Clear HTML Code" type="reset">
<button onclick="TogetherJS(this); return false;">Collaborate</button>
</form>
</div>
<!-- Code Tester Ends -->
I am making a code tester and I was wondering how do I make a save button for my code tester. My intent is to make it save as a .html file in the "u" directory on my site then shows them the link to the saved code. Here is my code:
<iframe src="menu-bar.html" height="45" width="1300" align="right" scrolling="no" frameborder="0"></iframe>
<br />
<br />
<br />
<!-- Code Tester Starts -->
<div class="center-page">
<!-- Code Tester Scripts Starts -->
<script src="http://jswebsite.co.nf/code-tester-javascript.min.js"></script>
<!-- Code Tester Scripts End -->
<p>If you press Ctrl + Enter, the code will open in a new tab. If you press the "Test HTML Code" button, the code will open in a new window if you are using a Chrome browser.
<br />Please resize the code box if needed.</p>
<p style="font-size:23px; color: white;">Code Tester for HTML:</p>
<form name="tester">
<textarea rows="20" cols="120" name="code-box" wrap="physical" id="codebox" spellcheck="false"></textarea>
<br />
<input type="button" value="Test HTML Code" onclick="preview()">
<input value="Clear HTML Code" type="reset">
<button onclick="TogetherJS(this); return false;">Collaborate</button>
</form>
</div>
<!-- Code Tester Ends -->
- Unless you use the File API, you can't save files to the client's puter. I'm not even sure if the API allows saving actually. – Carcigenicate Commented Apr 14, 2017 at 14:07
- There is no easy way (without a hack like in @moisrex's answer) you can do this by triggering ctrl + s keydown events because of security reasons. – yakya Commented Apr 14, 2017 at 14:20
2 Answers
Reset to default 2you can use this function:
function save(filename, html) {
var el = document.createElement('a');
el.setAttribute('href', 'data:text/html;charset=utf-8,' + encodeURIComponent(html));
el.setAttribute('download', filename);
el.style.display = 'none';
document.body.appendChild(el);
el.click();
document.body.removeChild(el);
}
usage:
save('test.html', '<html></html>');
Im not 100% sure what you are looking for but if the html file is already known you can set a download attribute to it in an tag like this
<a href="/test.html" download>