按自己想法来大概推理的话 应该是通过设置iframe或者frame，然后每个按钮上绑定不同的点击事件，通过点击按钮可以对容器中的部分文本修改其样式。

总结一下技术难点：

• 原生 <textarea> 没法显示带格式的文本；因此只能：
  • 堆 <div> ；
  • 在点击输入框时，通过 HTMLElement.focus() 聚焦到到一个隐藏的 <input> 上，通过监听 oninput 来获得用户输入。
• 存储格式，可以使用 json；
• 用户点击输入框的不同位置时通过 e.offsetX 与 e.offsetY 来实现定位光标。

1. contenteditable(HTML)属性：一个全局枚举属性，用于表示元素是否可编辑；该属性可被继承。
2. caret-color(CSS)属性：可设置编辑区域内的可插入光标的颜色；
3. Window.getSelection()方法：返回一个Selection对象，表示用户选择的文本范围或光标的当前位置；利用该方法可以对选中的文字进行样式设置，或在光标处插入内容等操作。

大概想到的就是这些；

参考文档：

• Selection - Web API 接口参考 | MDN
• contenteditable - HTML（超文本标记语言） | MDN

富文本编辑器基本上都是调用这个指令，完全不需要手动判断选中区域

document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

比如

document.execCommand('bold',false'); 
//切换选中区域的粗体样式

详情可参考 execCommand

用iframe