How to make a text editor in a Tinymce style textarea?

Question

I would like to know what exactly I must study in order to transform a textarea in a text editor WYSIWYG.Of course I know I must use Javascript,but I can’t imagine how styles are applied in real time to content within the textarea. I already searched the internet and people only gave link editors ready. I do not want the link of a ready. I would like to know the way more or less to be able to apply the style in the chosen part of the content within the textarea. I came to see people talking to use iframe, but they didn’t explain what exactly I would do with the iframe to achieve this.

Answer 1

The secret of WYSIWYG editors is the attribute contenteditable. With this attribute it is possible that an HTML element like <div> or <p> becomes an "input", but retaining the ability to interpret HTML.

To take the currently selected text and apply styles to it, use Javascript, as you suggested. However, the Apis supported by browsers are quite varied, so you need to do several code treatments to support multiple browsers. For example the Apis Window.getSelection() and Selection.

If you want to study how WYSIWYG editors work, I suggest analyzing their source code, there is a lot to be learned there. For example, here you can find the complete code of the editor jQuery-TE.