How can I save the value of Monaco Editor

Question

So i am trying to build a web based editor using Monaco, and I would like to save the code that I wrote in the editor in like a file by clicking a button and keep it even if I restart the server How can I do that ?

const value = ``;
const editor = monaco.editor.create(app, {
  model: monaco.editor.createModel(
      value,
      "domain",
      monaco.Uri.parse("file:///main.dm")
  ),

When I start the server, the editor is empty because value=''

score 2 · Accepted Answer · answered Dec 27 '21 at 09:00

Browser based apps have no direct access to the file system. So you only have 2 options:

Provide a download for the user on button click. The browser will then save the provided text in a file in its download folder.
Send the text to a server (if you have one, of course), which then has to store the text somewhere and provide it later on.

For option one the approach is usually like this:

/**
 * Stores the the text in a local file. Usually the web browser determines where the file is stored (download folder).
 *
 * @param text The content of the file.
 * @param fileName The name of the target file (should not contain a path).
 */
export const saveTextAsFile = (text: string, fileName: string): void => {
    const blob = new Blob([text], { type: "text/plain" });
    const downloadLink = document.createElement("a");
    downloadLink.download = fileName;
    downloadLink.innerHTML = "Download File";
    if (window.webkitURL) {
        // No need to add the download element to the DOM in Webkit.
        downloadLink.href = window.webkitURL.createObjectURL(blob);
    } else {
        downloadLink.href = window.URL.createObjectURL(blob);
        downloadLink.onclick = (event: MouseEvent): void => {
            if (event.target) {
                document.body.removeChild(event.target as Node);
            }
        };
        downloadLink.style.display = "none";
        document.body.appendChild(downloadLink);
    }

    downloadLink.click();

    if (window.webkitURL) {
        window.webkitURL.revokeObjectURL(downloadLink.href);
    } else {
        window.URL.revokeObjectURL(downloadLink.href);
    }
};

thanks for your reply, I have a couple question. how can I do If I want to save the text in the file instead of downloading a new file everytime ? and how can I load the file content ? — LYass, Dec 27 '21 at 14:57
Each SO question should focus on a single issue (Q&A style). If you have more questions write one SO questions for each of them. — Mike Lischke, Dec 28 '21 at 08:32

LYass · Answer 2 · 2022-01-02T19:59:21.580

So to load a file I used

function loadFileAsText()
{
  var fileToLoad = (<HTMLInputElement>document.getElementById("fileToLoad")).files![0];

  var fileReader = new FileReader();
  fileReader.onload = function(fileLoadedEvent)
  {
    var textFromFileLoaded = fileLoadedEvent.target!.result;
    //Do whatever we want with textFromFileLoaded
    editor.setValue(textFromFileLoaded!.toString());
  };
  fileReader.readAsText(fileToLoad, "UTF-8");
}

And apparently we can't save the content in a existing file because of security issues.

score 0 · Answer 3 · answered Jun 25 '23 at 21:31

Web apps can save content in localStorage. It won't create a new file on the operating system, but will instead store it in the browser.

The API is just one line:

// Save
localStorage.setItem(fileName, content);

// Get
const content = localStorage.getItem(fileName)

How can I save the value of Monaco Editor

3 Answers3