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.
#HTML CSS JAVASCRIPT ONLINE EDITOR 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.
0 kommentar(er)
