问题
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 ?
回答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.
来源：https://stackoverflow.com/questions/49773118/how-is-styling-being-applied-on-selected-characters-of-the-string-angularjs