CODEWITHSUNDEEP
htmlwysiwyg
H. Pauwelyn
H. Pauwelyn

Reputation: 14280

Make wysiwyg editor in html

I will make a wysiwyg1 editor for html. I've made a text area, but how can I make a wysiwyg editor for it? I would be easy if the text area implement html tags like snippet below, but it doesn't. How can I make this wysiwyg editor?

<textarea cols="30" rows="10">
    <h1>Title</h1>
    <hr/>
    <p>Some text</p>
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>
</textarea>

1 what you see is what you get

Upvotes: 0

Views: 2444

Answers (2)

Ali Mehdi
Ali Mehdi

Reputation: 924

You can use following code...

 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;
}
.editor
{
    width: 500px;
    height: 500px;
    background-color: yellow;
}
<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>

Reference: labs.qnimate.com/wysiwyg-editor

Upvotes: 4

Evan Hahn
Evan Hahn

Reputation: 12712

WYSIWYG editors are not built into web browsers. You'll have to use a library or write a bit of code yourself.

You can do a quick search on GitHub to find WYSIWYG editors for JavaScript.

  • wysiwyg.js looks like a good start
  • adamsanderson/wysiwyg looks like it is a "starter kit"—that is, while it doesn't have all of the capabilities you might want, it will let you roll your own
  • Aloha is a commercial editor that looks like it lets you edit entire pages if you want to

I haven't used any of these but these seem like places to start.

Upvotes: 6

Related Questions