I would like to know what exactly I should study to be able to transform a textarea into a WYSIWYG text editor. Logically I know that I should use Javascript , but I can not imagine how the styles are applied in real time in the content within the textarea. I've already done some research on the internet and people only link to publishers ready. I do not want a link ready. I'd like to know the way more or less to be able to apply the style to the chosen part of the content within textarea . I even saw people talking about using iframe , but they did not explain exactly what I would do with iframe to achieve this.
How do I make a text editor in a TinyMCE-style textarea?
3
asked by anonymous 24.03.2017 / 20:58
1 answer
6
The secret of WYSIWYG editors is the contenteditable attribute. With this attribute it is possible for an HTML element such as <div> or <p> to become an "input", while retaining the ability to interpret HTML.
To get the currently selected text and apply styles in it, use JavaScript, as you suggested. However, the APIs supported by the browsers are quite varied, so you need to do several code treatments to support multiple browsers. For example, the Window.getSelection() and Selection .
If you want to study how WYSIWYG editors work, I'd suggest analyzing their source code, there's a lot to learn there. For example, here / a> you can find the full jQuery-TE editor code.
24.03.2017 / 21:19