QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Creating a WYSIWYG Editor

Creating a WYSIWYG Editor

editor

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:

  1. 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.
  2. defaultUI: Its a boolean value. Assign it to false always, due to cross-browser issues.
  3. 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

<!doctype html>
<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.

May 24, 2014Narayan Prusty
Creating a Percentage of Webpage Scrolled IndicatorHow To Detect Adblock using JavaScript
Comments: 1
  1. Jan
    5 years ago

    First of all, thanks for the great tutorial.
    But i think there is one Problem:
    When u type this sentence ” Tomorrow is sunday” and underline Tomorrow and sunday, everything works fine. But then, when select from “orrow” to “sund” and press underline, it breaks. Any conclusion for this problem ?

    ReplyCancel

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image8 years ago 2 Comments Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • contentEditable Global Attribute and document.execCommand function
  • Implementation of WYSIWYG HTML Editor
Related Articles
  • WordPress Set HTML Editor as Default
  • WordPress Set Visual Editor as Default
  • Create an Frontend Editor with Code Highlighting and Execution
  • CSS3 :before and :after Psuedo-Elements and Generated Content
  • Find Internet Type using HTML5 Network Information API
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license