Build a Text Editor

Source Demo

By Samay Shamdasani

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:

change the font
center the text boxes and set a max-width
remove the ugly blue outline with div:focus
add some padding
adjust the font size

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:

for both divs, we need to use document.getElementById().innerHTML and set it to a localStorage[] ‘default text’ object
need to have an interval function which has a localStorage object assigned to the document.getElementById().innerHTML for each div
make the function run every 1000 milliseconds, or 1 second.

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);