Highlighting Menus (3) - Finding Parent Tags of a Range This means that in the below image the first selected range is considered while the second one is not considered in the decision as to which menu button is to be highlighted. In this tutorial, to keep things simple, we will ignore the range in which starting element and final elements are different. The startContainer and endContainer properties of a Range object gives the starting DOM element and final DOM element of the selected range. In this case the starting point lies inside a Text Node, and the final point lies inside a (or ) Element. For example, a user may select some text starting from normal text and end selection in a bold text. One important thing is to note that the starting point and final point of a Range may be different DOM elements. Highlighting Menus (2) - Start and End Containers of a Range Each such selection represents a Range object.īasically the Selection object contains an list of Range objects. The user is free to make multiple selections in the editor (by using the Control key). To know the selection in the current document, you can use the window.getSelection() method. 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. 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)
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |