⑴ 請教前端達人，知乎的編輯器是怎樣實現這個功能的
在線富文本編輯器裡面，做以下操作：
選中一串文字，點擊「 B 」把它加粗。
把游標移到這串文字的中間，再點「 B 」。
輸入一些文字。
在大部分其他的編輯器裡面，到第二步的時候，剛才加粗的所有文字都回復了正常狀態:
step1: some bold text
step2: some bold text
step3: some inserted text bold text
而知乎的編輯器的效果是這樣：
step1: some bold text
step2: some bold text
step3: some inserted text bold text
從 HTML 上面看，它是把一個<b></b>節點拆成了三個節點：
<b>some</b>inserted text<b>bold text</b>.
問題是：在 contentEditable 上的編輯操作只能更新當前節點的文本內容，也就是說如果沒有 js 干預，效果是這樣：
<b>some inserted text bold text</b>
知乎的編輯器是怎樣完成分拆動作的？
監聽 keypress 事件？那輸入中文怎樣實現？
監聽 change ？