Enlight

Learn to code by building projects

Build a Text Editor

a minimal text editor that autosaves your text every second

Source Demo Start Coding!

Getting Started

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);
	
Exit Editor View

Write your code here!