Implementing Save & Clear buttons [SOLVED]

I keep a code editor on my site for myself and people who use my codes to use, and since I really wanted syntax highlighting in the newest version of it I’ve just rewritten it to use CodeMirror. Everything’s working great except for the fact that my old Save and Clear buttons are now incompatible (which I expected, haha.)

I’m having trouble figuring out how to implement new ones that are compatible with CodeMirror; would anyone more experienced with CM be willing to help me out?

What I need the two buttons to do is pretty cut and dry; save would take the code you’re editing and save it locally in a .txt file, and clear would just clear what you’re working on in the editor if you want to start over.

You can see my current implementation of CodeMirror below:

    <script>
  var delay;
  var editor = CodeMirror.fromTextArea(document.getElementById('input-inner'), {
    lineWrapping: true,
    indentUnit: 5,
    mode: 'htmlmixed'
  });
  editor.on("change", function() {
    clearTimeout(delay);
    delay = setTimeout(updatePreview, 300);
  });
  
  function updatePreview() {
    var previewFrame = document.getElementById('output');
    var preview =  previewFrame.contentDocument ||  previewFrame.contentWindow.document;
    preview.open();
    preview.write(editor.getValue());
    preview.close();
  }
  setTimeout(updatePreview, 300);
</script>

Please let me know if seeing the entire source would be more helpful, and thank you in advance if anyone can clue me in!


EDIT FOR SOLUTION:

Just in case anyone else comes here looking for the same function solution, I worked it out today with round two of digging around online and trial and error. :tada:

To CLEAR your CodeMirror content on button click:
You’ll need a button (of course) and you’ll need to add adjust your CodeMirror settings.

CLEAR BUTTON:

onclick="myFunction()"

CODEMIRROR:

function myFunction() {
    editor.setValue('');
}

To SAVE your CodeMirror content on button click:
You’ll need another button and you’ll need to add add a new function into your page.

SAVE BUTTON:

onclick="myFunction()"

SAVE FILE:

function myFunction() {      
// your CodeMirror textarea ID
var textToWrite = document.getElementById("TEXTAREA_ID").value;

// preserving line breaks
var textToWrite = textToWrite.replace(/\n/g, "\r\n");

var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});

// filename to save as
var fileNameToSaveAs = "FILENAME.txt";

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

// hidden link title name
downloadLink.innerHTML = "LINKTITLE";

window.URL = window.URL || window.webkitURL;

downloadLink.href = window.URL.createObjectURL(textFileAsBlob);

downloadLink.onclick = destroyClickedElement;
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
downloadLink.click();
}

function destroyClickedElement(event) {
document.body.removeChild(event.target);
}

This will automatically and locally save your work with carriage returns preserved to a pre-named text file.

2 Likes

This didn’t work for me, perhaps because this post is a few years old now.
For some reason, the tried-and-true…

var textToWrite = document.getElementById("TEXTAREA_ID").value

…method kept returning NULLs.

I had to switch to using the CodeMirror API doc.getValue() method instead, which works a treat…

var editor = CodeMirror.fromTextArea(document.getElementById("TEXTAREA_ID"), {styleActiveLine: true});
var textToWrite = editor.doc.getValue();

Hope this helps someone!

1 Like

@tessisamess @Hoppertron would these methods overwrite an existing file?

Aye, but only on your local computer/mobile — your operating system should give you a warning if that happens. It won’t affect a file that is stored remotely.