Build a Text Editor

Build a minimal text editor that autosaves with HTML/CSS/JS

December 25, 2016

0 views


Interested in this project?

Continue Learning

In this tutorial, we'll make a text editor in the broswer. Using JavaScript, we can save the text automatically in a user's localStorage so that whenever the text editor is pulled up, it remembers the text that was written. localStorage is a JavaScript object that let's you save data in user's browser.

As always, you'll need a folder with three files:

  • index.html - for our markup
  • style.css - for styling
  • app.js - for the function(s)

Since we're making a text-editor, our content has to be editable! Thankfully, HTML has an attribute for that. Go ahead: link the files, and create two divs with the contenteditable attribute and with a heading and a content id.

<html>
  <head>
    <title>Text Editor</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="style.css" />
  </head>

  <div id="heading" contenteditable="true"></div>
  <div id="content" contenteditable="true"></div>

  <script src="app.js"></script>
</html>

Open the html file in your bowser. You'll see that you have two editable text boxes. However, they're pretty ugly. Let's style them!

Styling the Editor

Here's some basic things you should do in your the style.css file:

This is my attempt. Feel free to customize your editor however you wish to!

html {
  font-family: "Helevetica", sans-serif;
}

body {
  color: #333;
  font-weight: 100;
  max-width: 50em;
  margin: 0 auto;
}

div:focus {
  outline: none;
}

#heading {
  font-size: 48px;
  padding-top: 30px;
}

#content {
  padding-top: 10px;
  font-size: 24px;
}

How does your editor look now? Play around with it! However, you may have noticed that if you refresh the page, the text doesn't save. Let's fix that.

JavaScript and localStorage function

To save the text in our two divs, we need to store it in the brower's localStorage. To do that, we first have to get the div ids from the HTML document and set it to a localStorage instance with some default text. Then, we can write a function that checks the innerHTML of both the divs and saves it every second. Here's what we have to write:

This is what the finished app.js should look like:

document.getElementById("heading").innerHTML =
  localStorage["title"] || "Just Write"; // default text
document.getElementById("content").innerHTML =
  localStorage["text"] || "This text is automatically saved every second :) "; // default text

setInterval(function() {
  // fuction that is saving the innerHTML of the div
  localStorage["title"] = document.getElementById("heading").innerHTML; // heading div
  localStorage["text"] = document.getElementById("content").innerHTML; // content div
}, 1000);

Comments (0)