Creating a rich-text editor in JavaScript isn't as difficult as many may think it is and can give you the much needed control over your code and applications as you won't have to rely on 3rd party implementations. So today I'll be going over the steps to make a very simple text-editor with the usual basic functionality, such as text/font styling and embedding links.

Creating the editor

Let's start off with creating our actual text editor where we will be typing our text. For that, we'll be using a standard 'div' tag, and we will be setting the contenteditable attribute to 'true'. The contenteditable attribute turns any container into an editable text field with default styling set by the browser.

<div class="editor" contenteditable="true"> 
</div>

Which with some very basic styling, looks something like this.

The content inside of the container can be retrieved how you would normally retrieve any content inside of a div using the innerHTML property of the container.

Creating the toolbar

Next up, let's set up a basic toolbar with the usual text formatting features, such as bolding and italicizing text. I will be using Font Awesome for the icons, as they have all the necessary ones and are very easy to implement. And again, with some very basic styling, we have something like the following.

And the styling is as follows.

.sample-toolbar
{
    border:solid 1px #ddd;
    background:#f4f4f4;
    padding: 5px;
    border-radius:3px;
}

.sample-toolbar > span
{
    cursor:pointer;
}

.sample-toolbar > span:hover
{
    text-decoration:underline;
}

The benefit of creating your own text-editor, is that you can essentially add any features that you wish and you can then expand on those features. For now, we'll just handle these 4 basic functions of making text bold, italic, creating lists and adding a hyperlink to any selected group of text.

Formatting

JavaScript includes built-in functions to handle the formatting for us, all we have to do is to specify the current text selection and the type of formatting that we are looking to implement. And we can do that with the following helper function.

function format(command, value) {
    document.execCommand(command, false, value);
 }

The execCommand has the following signature, which we'll break down below.

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

The execCommand function returns true if the command and value are valid arguments for the current browser. And false otherwise. The second argument determines whether the default user interface should be shown. However, that parameter is not implemented in Firefox.

Bold

Let's start with 'bolding' the selected text. With the built in functions it is as easy as calling the format function with the appropriate values.


<a href="javascript:void(0)" onclick="format('bold')"><span class="fa fa-bold fa-fw"></span></a>
    

In this case, there is no associated 'value' to go with the 'bold' command, so we can leave the argument out. And the same approach is taken for making text italic.

Italic


<a href="javascript:void(0)" onclick="format('italic')"><span class="fa fa-italic fa-fw"></span></a>
    

In order to have the formatting take effect, you must be highlighting some text and be inside of a contenteditable container. The browser is in charge of running the command against the right contenteditable container, since you can have many on a single page.

List

And the same thing once again is applicable to creating list items.


<a href="javascript:void(0)" onclick="format('insertunorderedlist')"><span class="fa fa-list fa-fw"></span></a>
    

Next up, let's include the ability to add hyperlinks to some selected text in the editor. There are 2 different ways to accomplish this, and we'll talk about both down below and when to use each.

Hyperlinks

 function setUrl() {
        var url = document.getElementById('txtUrl').value;
        var sText = document.getSelection();

        document.execCommand('insertHTML', false, '<a href="' + url + '" target="_blank">' + sText + '</a>');
        //format('createlink', url);
 }

The first method involves using the 'createlink' command, which takes a 'url' as a value. This is the short and simple way of creating a hyperlink on the selected text. However, if you need to add any extra attributes to the url, such as a class or a target attribute, then you will need to use an alternative method.

Which is where the 'insertHTML' command comes into play. The command replaces whatever content you are highlighting with the given value. In our case, we want to replace the currently selected text, with an anchor tag, our desired attributes, and the selected text itself.

You should end up with something like the following.

This is a very quick and easy implementation of a text-editor. Having said that, you can easily find and implement a fancy 3rd party editor with all of the bells and whistles already done for you. But there is much power in having your own custom editor that you can essentially do whatever you wish to do with. This blog runs off of a very custom editor that I spent a fair amount of time on, but that makes my writing much more efficient than I would otherwise be.

The full source is down below for your editing and tweaking pleasures.

Full Source

    
<html>
<head>
	<style>
		.editor
        {
			border:solid 1px #ccc;
			padding: 20px;
			min-height:200px;
        }

        .sample-toolbar
        {
			border:solid 1px #ddd;
			background:#f4f4f4;
			padding: 5px;
			border-radius:3px;
        }

        .sample-toolbar > span
        {
			cursor:pointer;
		}

        .sample-toolbar > span:hover
        {
			text-decoration:underline;
		}
	</style>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>

<body>
	<div class="sample-toolbar">
		<a href="javascript:void(0)" onclick="format('bold')"><span class="fa fa-bold fa-fw"></span></a>
		<a href="javascript:void(0)" onclick="format('italic')"><span class="fa fa-italic fa-fw"></span></a>
		<a href="javascript:void(0)" onclick="format('insertunorderedlist')"><span class="fa fa-list fa-fw"></span></a>
		<a href="javascript:void(0)" onclick="setUrl()"><span class="fa fa-link fa-fw"></span></a>
		<span><input id="txtFormatUrl" placeholder="url" class="form-control"></span>
</div>

<div class="editor" id="sampleeditor">
	</div>

	<script>
		window.addEventListener('load', function(){
			document.getElementById('sampleeditor').setAttribute('contenteditable', 'true');
			document.getElementById('sampleeditor2').setAttribute('contenteditable', 'true');
        });

		function format(command, value) {
			document.execCommand(command, false, value);
		}

		function setUrl() {
			var url = document.getElementById('txtFormatUrl').value;
			var sText = document.getSelection();
			document.execCommand('insertHTML', false, '<a href="' + url + '" target="_blank">' + sText + '</a>');
			document.getElementById('txtFormatUrl').value = '';
		}
	</script>
</body>
</html>
    
Walter G. is a software engineer, startup co-founder, former CTO of several tech companies and currently teaches programming for a coding bootcamp. He has been blogging for the past 5 years and is an avid BMX rider, bio-hacker and performance enthusiast.
Buy me a coffeeBuy me a coffee
If you read this far, then I hope you enjoyed this post and found it useful! Consider adding to my daily coffee funds to continue to provide better and more helpful articles in the future!
Maybe later

Add a comment

Send me your weekly newsletter filled with awesome ideas
Post comment