Make wysiwyg editor in html -

i make wysiwyg¹ editor html. i've made text area, how can make wysiwyg editor it? easy if text area implement html tags snippet below, doesn't. how can make 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>

_{¹ what you see is what you get}

you can use following code...

 window.addeventlistener("load", function(){      //first check if execcommand , contenteditable attribute supported or not.      if(document.contenteditable != undefined && document.execcommand != undefined)     {         alert("html5 document editing api not supported");      }      else      {          document.execcommand('stylewithcss', false, true);      }  }, false);    //underlines selected text  function underline()  {      document.execcommand("underline", false, null);  }    //makes selected text hyperlink.  function link()  {      var url = prompt("enter url");      document.execcommand("createlink", false, url);  }    //displays html of output  function displayhtml()  {      //set textcontent of pre tag innerhtml of editable div. textcontent can take form of text , display without browser interpreting it. preserves white space , 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 content editable attribute true can edit inside div tag , enable execcommand edit content inside it.-->  <div class="editor" contenteditable="true" spellcheck="false">      text editor  </div>    <div class="codeoutput">      <!-- <pre> tags reserves whitespace , newline characters. -->      <pre class="htmloutput">      </pre>  </div>

^{reference: labs.qnimate.com/wysiwyg-editor}