In this post I will provide simplest way of creating a WYSIWYG HTML editor. WYSIWYG HTML editor makes it possible to generate HTML code by creating the HTML output. So we see the output before we see the HTML code. Every CMS uses WYSIWYG editor so that anyone can create a blog post without knowing HTML.
View Demo
In this post I will be using HTML5 Document Editing API to create a WYSIWYG HTML editor..
contentEditable Global Attribute and document.execCommand function
The contenteditable attribute specifies whether the content of an HTML element is editable or not. It is a global attribute so it can be used on any HTML element.
document.execCommand allows us to manipulate the content of the active contentEditable element. It styles the selected text inside the active contentEditable element. It can also insert new HTML elements inside the currently active contentEditable element. It takes three arguments:
- command: Its a string value. We pass a command which indicates what to be changed or inserted into the contentEditable region. Get list of all commands here.
- defaultUI: Its a boolean value. Assign it to false always, due to cross-browser issues.
- value: Its a string value. Some commands require additional arguments. For example, making making a link we need the URL, so the URL can be passed in this value argument.
Implementation of WYSIWYG HTML Editor
<html>
<head>
<title>WYSIWYG Editor</title>
<style>
.editor
{
width: 500px;
height: 500px;
background-color: yellow;
}
</style>
</head>
<body>
<button onclick="underline()">Underline Text</button>
<button onclick="link()">Link</button>
<button onclick="displayhtml()">Display HTML</button>
<!-- Make it content editable attribute true so that we can edit inside the div tag and also enable execCommand to edit content inside it.-->
<div class="editor" contenteditable="true" spellcheck="false">
This is the text editor
</div>
<div class="codeoutput">
<!-- <pre> tags reserves whitespace and newline characters. -->
<pre class="htmloutput">
</pre>
</div>
</body>
<script>
window.addEventListener("load", function(){
//first check if execCommand and contentEditable attribute is supported or not.
if(document.contentEditable != undefined && document.execCommand != undefined)
{
alert("HTML5 Document Editing API Is Not Supported");
}
else
{
document.execCommand('styleWithCSS', false, true);
}
}, false);
//underlines the selected text
function underline()
{
document.execCommand("underline", false, null);
}
//makes the selected text as hyperlink.
function link()
{
var url = prompt("Enter the URL");
document.execCommand("createLink", false, url);
}
//displays HTML of the output
function displayhtml()
{
//set textContent of pre tag to the innerHTML of editable div. textContent can take any form of text and display it as it is without browser interpreting it. It also preserves white space and new line characters.
document.getElementsByClassName("htmloutput")[0].textContent = document.getElementsByClassName("editor")[0].innerHTML;
}
</script>
</html>
Walkthrough the above code and read the comments to understand it. This is the simplest version of WYSIWYG HTML editor. It has two editing functionalities, i.e, adding underline to text and making text as hyperlink. We can also see the HTML code of our view.
Conclusion
When there was no HTML5, people uses to directly write HTML code to generate content for their webpage. Or they used tools like frontpage or dreamweaver. But now HTML5 makes everything simple as easy. If you need any other explanation then please leave a comment. Thanks for reading.
Reference
For complete reference on HTML5 Document Editing API see this article.
@narayanprusty
