I am currently trying to make a custom WYSIWYG editor for my site and have a couple of questions I would like to ask that tie into one another. I have been watching some tutorials on how to make an editor from scratch using HTML, CSS, and JavaScript, and all of them use the (name for text field).document.execCommand(“(nameOfTypeOfTextFormatting)”, false, null), however I have heard from a few places that it is outdated, and something like getSelection() and others should be used. It also seems a bit limited compared to what I would like to do. Therefore I would like to know if there is a much better alternative method of formatting text than using execCommand().

The structure of my WYSIWYG editor is encased in a form tag, with a div tag containing all of the buttons and then an iframe tag which is where all of the content is written.

One thing that I have a problem with execCommand() is that whenever I try to input header tags, and then click again on the same header button, it doesn't remove it unlike the bold or strikethrough buttons. Furthermore whenever I add a header tag, and click on the sourcecode button (to flip between showing the actual html to the content that the browser displays) it shows that a <div> tag(s) is added after it.

If you would like to see what one of the functions for placing a header looks like here it is:

<input type='button' value='Sub-H 3' onclick='editor_sub_heading_3()'>

...

function editor_sub_heading_3() {
  editor_textbox.document.execCommand( "formatBlock", false, "H3" );
} 

Another thing I noticed is that when I clicked on the superscript button, then clicked on the Header (h1) option, then clicked on the superscript button to remove the superscript formatting, the text of the header became smaller than usual. To which when I checked the source code, it added a span tag defining the font size of 13.3333... instead of the font size of a normal header tag.

Therefore I would like to know if (if I should still use execCommand()) there is a way to format text like this without having all this unneeded junk added to it, as well as smoothly transitioning from one format of text to another without any errors happening.

Finally, I would like to ask how would I be able to input customized html tags with css properties. For example I might want to input a table, that when inputted will use a pre-defined css id or class name that will format that table right when it is inputted for example. If there is a better way to format text instead of execCommand(), how would I be able to accomplish this?

If anyone could help me with this that would be great! Thanks