The Data Action is the command that will be executed later on the selected text. This is what the two toolbar lines look like in HTML: Advertisements This is important later so that we can set the button active if the current text selection has a certain formatting. In addition, some elements have a data tag name ( data-tag-name). This data action contains the command that is to be executed later on the selected text. In such a box there is always a span element with a data action ( data-action). box boxes in each line for a rough outline of the formatting options. line), but there can be as many as you like. I have arranged the toolbar in two lines (. toolbar and a container for the different views (Visual view & HTML view). This includes a container for the toolbar. Our main HTML task is to create the editor toolbar. AdvertisementsĪlso on this page I use this rich text editor for the comments! 🙂 1. Here is the running demo version of the editor we are about to code together. In the next steps I will go into the implementation of this WYSIWYG editor in detail and at the end you will be able to program your own editor The following demo is created with pure HTML, CSS and pure JavaScript. However, you might find one or the other editor a bit overloaded, too complicated or you just want to program your own WYSIWYG editor. Many of the available editors, like TinyMCE, work really well and are great for most projects. 3.5 Remove formatting when pasting text (paste event).3.4 Enable toolbar buttons when formatting is selected.3.3 Program link modal (pop-up) functionality.3.2 Assign functions to toolbar buttons.
0 kommentar(er)
