How is styling being applied on selected characters of the string- AngularJS

Question

I came across rich text editor in this plunkr and wanted to know how exactly is the code able to understand that a particular element has to be decorated with bold styling ?

The $container.html() shows proper styling in console but how it knows which part of string was selected for styling ?

Answer 1

So that plunkr is using a HTML5 feature called contenteditable. In short this attribute turns a html element (usually a div) into something that can act like a textarea, but you're editing the actual html on the page. As for the selected styling the Bold button is using Document.execCommand to apply a command to the current selection.

Here's a tutorial on getting started with contenteditable and execCommand: https://code.tutsplus.com/tutorials/create-a-wysiwyg-editor-with-the-contenteditable-attribute--cms-25657. Hope that helps.

PS I updated the link in the other question you commented on.