前言

Tea.js 不依赖 contenteditable 来做富文本的格式化操作,取而代之的是自己的数据模型层,即用户的输入 -> 数据模型的更新 -> UI 更新。

数据模型通俗的说就是 dom 树的数据存储层,dom 树本质上是一棵多分叉树,对于数据模型的操作便又映射成了对多叉树的操作。

需要具备的操作能力

浏览器对于 contenteditable 的 execCommand 各种操作的支持,需要在 model 层进行一一实现。 /

  • 节点的切割

    • enter 按键,需要将原节点从光标处一分为二
    • inline style 的插入时,需要将原节点一分为二。如在 strong 文本中中间插入一个正常文本。
  • 节点的添加

    • enter 按键,如果节点切割后,需要将新切割的节点,添加为原节点的兄弟节点。
  • 节点的修改

    • 文本输入时,需要修改对应的文本节点的内容,需要注意的是 cjk 输入法输入。
  • 节点的删除

    • delete 按键的删除。会分为光标处单个文本的删除和选取的删除。
  • applyInlineStyle

    • 闭合选区的 applyInlineStyle 比较好处理,只需要找到合适的插入位置即可。
      • 举个例子,如光标在 em 节点中。
        • 将当前的 em 节点进行切割
        • 新建一个 strong 节点,添加为光标所在的 em 节点的 sibling node
        • 将光标定位到 strong 节点里面
    • 非闭合选区的处理,需要从选区开始到选区结束进行节点位置的比对,需要的处理就较为复杂。
  • removeInlineStyle

    • 同 applyInlinStyle 的操作

参考资料

webkit contenteditable 测试用例