You must have come across many visual editors, allowing you to quite conveniently form the appearance of pages, or some messages, for example, on a forum. And not with BB codes, and immediately get a specific result. There are a lot of these editors on the Internet. One of the most popular is TinyMCE, however, I am a supporter of my own scripts and believe that For every problem there must be a solution., not universal. Therefore, in this article, I will how to create visual editor in JavaScript.
Here is some well-commented code:
At first glance, the code seems to be very complex. And so it is, but if we consider it by the basic elements, then there is nothing complicated. There is regular form and field hidden, where the resulting in the editor is saved HTML code. The editor itself is a regular frame, that is, a regular HTML page, in which we can write text ( designMode="on"). And various formattings are created using the method execCommand() A that executes the command specified in the parameter. And I think it will not be difficult for you to create new buttons and attach similar handlers to them.
There is nothing superfluous in this script, only the most important and basic, and it can be taken as a basis for creating your own visual editor in JavaScript, in which there will be nothing superfluous, but only what you need.