Have you seen WYSIWYG editors Today I'm showing the simple version of WYSIWYG editor.
So let's start our simple version
I'm not explaining everything but Important things
first, we need to add a contentEditable attribute to our HTML element
<div class="editor" contenteditable> <h1>Simple Html editor</h1> <p>Good to start</p> </div>
Now, div element is editable and our HTML document exposes execCommand.
Let's see what is execCommand
execCommand needs three arguments
cmd : It means we have to tell which command needs to execute.
defaultUI :it is boolean whether default user interface is shown or not.
value : We need to add value argument to some commands.
example: In createLink cmd, we need to add a value it refers to href attribute in the link.
So lets make it use of execCommand in practice
Now I'm creating button HTML element and attached an event listener to it.
<button class="tool-items fa fa-bold" onclick="document.execCommand('bold', false, '');"> </button>
Now we are only built bold command Check out full version below.