How to Create a WYSIWYG Editor with HTML, Bootstrap, and Summernote

Creating a WYSIWIG html editor is not as hard as you may think. I know many programming tutorials will show you how to set up a text box on your website to accept user input, but very few will show you how to do it.

This method that I am about to show you will work regardless of which web framework you are using, as long as the page you will eventually render is in html. Trust me it will work.

Before we dive right into developing. Let’s talk a little about WYSIWYG. You may already know this, if you do, please feel free to jump ahead and review the list of things you will need.

WYSIWYG is an acronym for What You See Is What You Get. Meaning that what you type in textbox will look exactly as it will look on the page when it is published. You can style the text in the editor without using html tags.

In the early days of web development, most developers had to style text with html tags. By styling I mean, do things like make text bold, italicize, change the color etc.

The paragragraph above would have had to be written like this:

<p>When I was just startig out online about 9 or so years ago, most developers had to style text with html tags. By styling I mean do things like make text <strong>bold</strong>, <i>italicize</i>, <span style="color:red;">change the color</span> etc.<p>

Imagine the hassle! And the errors.

If you are coming from a WordPress background you are no stranger to WYSIWIG. That content management system is actually popular because most people find its editor so easy to use. You want the same functionality in your apps. Right?

Here is a list of things you will need to get started.

WYSIWYG Editor Checklist

Summernote.org – https://summernote.org/

Summernote is the actual editor that we are going to use. It using JQuery but you will not need to install jQuery on your website to use it.

Set up your html page with the Doctype. Don’t remember what that is? It’s this.

<!DOCTYPE html>
<html lang="en">
...
</html>

Just copy the the following block of code to the head of your html page to get started.


<!-- include libraries(jQuery, bootstrap) -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<!-- include summernote css/js -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>

So what did you just copy?

You copied the links for Bootstrap, jQuery and the default summernote stylesheets. This is the fastest way to get started but if you will be using the editor in an app that will be offline alot then you may want to add those libraries to a static folder within your app like so…

Create a folder named “static” in your app or website’s main folder and download the files listed above in it. The folder should contain the following:

summernote.min.css
summernote.min.js
bootstrap.min.js
bootstrap.min.css
jquery-3.5.1.min.js

You could also create subfolders in the static folder to separate the javascript files from the css files. It’s up to you.

Once you have those files ready you can link to them with relative links depending on where they are in your project.

<!-- include libraries(jQuery, bootstrap) -->
<link href="static/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="static/jquery-3.5.1.min.js"></script>
<script src="static/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<!-- include summernote css/js -->
<link href="static/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="static/summernote@0.8.18/dist/summernote.min.js"></script>

Time for the shockingly easy part… Just one more step to a working full featured WYSIWYG editor

Create a normal html form with a textarea field like this…

<form method="post">
  <textarea id="summernote" name="editordata"></textarea>
</form>

Notice that the id is set to “summernote”. That’s important. Now to get your editor to load simply add the following jQuery code to the bottom of the page. I know its a lot of code, but trust me, it’s the last one… maybe 🙂

$(document).ready(function() {
  $('#summernote').summernote();
});

And you are done. Not quite you still need to set up your backend so that you can sanitize and handle whatever is typed into the form. Maybe you know how to do that already. Either way, I am going to write another post about that.

Let me know if you got it work in the comments. Looking forward to hearing from you.

Leave a Reply

Your email address will not be published. Required fields are marked *