Focus on Content Editable Element
You can use a ce(content editable) element as a text editor or a content management system. These articles are going to be using a ce as a text editor. Ce elements can be focused on like a input or text area element. Once you focus on a ce, you can start typing.
The Elements Within a Ce Text Editor
When you make a ce text editor, you want to start with an element such as a paragraph or a div with some text content in it. You can press the enter key & the text editor will start a new line with a new element in it. If you press enter while there is text after the cursor, you will move the text after the cursor to the new element. The element you start the te with will be created every time you press enter.
The <br> tag
The <br> tag inside the text editor is important. When you focus in on the te, the cursor needs an element or a text node to start at. So, when I press enter it creates a new <div> with a <br> tag inside of it. The <br> tag is what the cursor is selecting so I can type in it. Once I start typing the <br> tag disappears because it’s just a line break, there is no elements or content inside of it. If I delete all the text the <br> will reappear, if I hit delete again the element will be deleted.
My name is Chris. You can find more articles about html/css & javascript on the webplayground.
Top comments (0)