FREE TEXT EDITOR HTML HIGHLIGHTING PROFESSIONAL

A Selection object represents a range of text that is selected by the user. When the user selects some text (by dragging the mouse from an initial point to a final point) in the editor, you will need to know the underlying elements that the user has selected. To understand how this would work, you need to know a bit about Selection and Range APIs. For example when you click on a bold text, you would expect the 'Bold' menu to be highlighted (like in normal text editors). The main challenge in creating the text editor is to highlight menu options when something is selected in the editor. execute command when 'Bold' menu is clickedДocument.querySelector('#bold-menu').addEventListener('click', function() ) Highlighting Menus (1) - Selection and Range Objects Once an image is chosen, the command can be executed.ДЄll commands will be executed when an appropriate menu option is clicked.

FREE TEXT EDITOR HTML HIGHLIGHTING PROFESSIONAL

In real-life cases (just like in professional HTML editors), the user will see a dialog to choose or upload an image first. To insert an image, you need to give the url of the picture as the third parameter to document.execCommand.

Picture document.execCommand('insertImage', false, ' This command will create an image at the insertion point.

This command will create a bullet list selected text, or the insertion point.

List document.execCommand('insertUnorderedList').

This command will toggle underline for the selected text, or the insertion point.

Underline document.execCommand('underline').

All browsers insert a tag - excpet IE which inserts a tag.

This command will toggle bold for the selected text, or the insertion point. Since this tutorial is focussed on providing only 4 edit options - 'Bold', 'Underline', 'List' & 'Picture', only these commands will be discussed here. There is also an 'Undo' command to undo the last executed command ! Basically there are commands for most of the features that you can imagine for a HTML editor. There are commands that to make text as bold, underline, change font size and family, add foreground or background color, insert links, HTML or images, and a lot more. The document.execCommand method can be used to execute various commands on a editable region. Setting spellcheck='false' will disallow spelling check on the editor. Д¬ontentEditable attribute indicates that the contents of the element can be edited. So to allow the editor to accommodate HTML tags, we use the contentEditable attribute on a. For example a selection that involves starting from normal text and ends up in a bold text will not be considered while deciding the menu option to highlight (more on this later).Дownload codes for the above demo Using a contentEditable ElementДЄ normal element cannot be used for a HTML editor, because HTML cannot be rendered inside a textarea. While deciding the appropriate menu options to highlight, only those selections will be taken into account where start position and end position involve same type of element.For example, selecting both a bold text (1) and bold text inside a list (2), will highlight only the 'Bold' menu option and not the 'List' menu option. If there are multiple selections (via the Ctrl key), then only common commands will be highlighted. Similarly selecting some part of a list will highlight the 'List' menu opton. For example, clicking on a bold text will highlight the 'Bold' menu option. On selecting some text, it highlights the appropriate menu option.(For simplicity, only this image will be inserted while adding an image) Unordered lists and images can be inserted via 'List' and 'Picture' menu options.Supports making text bold or underline via 'Bold' and 'Underline' menu options.

Free text editor html highlighting