[db:标题]

先前我们讨论了是编辑节点的组件预设，包括零宽字符、Embed节点、Void节点等，接下来我们需要讨论的是非编辑节点内容渲染，也就是占位节点、只读模式、插件模式、外部节点挂载等。这些节点类型在编辑器的设计中处于常见的外部节点，例如占位符号、弹出层等。 开源地址: https://github.com/WindRunnerMax/BlockKit 在线编辑: https://windrunnermax.github.io/BlockKit/ 项目笔记: https://github.com/WindRunnerMax/BlockKit/blob/master/NOTE.md 从零实现富文本编辑器系列文章 深感一无所长，准备试着从零开始写个富文本编辑器 从零实现富文本编辑器#2-基于MVC模式的编辑器架构设计 从零实现富文本编辑器#3-基于Delta的线性数据结构模型 从零实现富文本编辑器#4-浏览器选区模型的核心交互策略 从零实现富文本编辑器#5-编辑器选区模型的状态结构表达 从零实现富文本编辑器#6-浏览器选区与编辑器选区模型同步 从零实现富文本编辑器#7-基于组合事件的半受控输入模式 从零实现富文本编辑器#8-浏览器输入模式的非受控DOM行为 从零实现富文本编辑器#9-编辑器文本结构变更的受控处理 从零实现富文本编辑器#10-React视图层适配器的模式扩展 从零实现富文本编辑器#11-Immutable状态维护与增量渲染 从零实现富文本编辑器#12-React可编辑节点的组件预设 从零实现富文本编辑器#13-React非编辑节点的内容渲染 Placeholder 占位节点 在编辑器中，在内容为空的情况下，通常需要渲染一个占位节点来提示用户输入内容。在浏览器的input和textarea中，都存在原生的占位节点实现。而在编辑器中，这部分占位节点就需要自行实现，浏览器在ContentEditable模式并不存在原生的占位节点。 在开源的编辑器中，quill和slate都提供了占位节点的实现，并且还是属于典型的实现。quill的占位节点是使用CSS的伪元素来实现的，使用伪元素的好处是，完全不会影响到浏览器的DOM结构，这样也就不会影响到选区模型等设计，整体结构类似下面的内容。 <div data-placeholder="请输入内容"> ::before <div data-node><span data-leaf>&ZeroWidthSpace;</span></div> </div> .block-kit-x-editable div[data-block][data-placeholder]::before { color: #bbbfc4; content: attr(data-placeholder); height: 0; pointer-events: none; position: absolute; } 在这里，content是可以直接将DOM上的属性值渲染到占位节点上的，即data-placeholder属性值，这样就可以通过Js来控制属性值，进而处理占位节点的内容了。absolute主要是为了使其脱离DOM文档流，不影响选区的定位，pointer-events则是为了避免事件交互。 其实用伪元素实现的最重要的点是，在ContentEditable模式下，浏览器不会让用户编辑::before或::after伪元素生成的内容。我们无法选中伪元素，其也不会参与光标、选区的计算。因为伪元素不属于DOM树，而ContentEditable只作用于真实的DOM节点及其文本内容。 而类似slate的实现，则存在两部分特殊的设计。首先是将占位节点直接渲染到Editable编辑区域内，这样就可以复用React的渲染节点作为整个占位节点。再者是占位节点是渲染在leaf区域内，这也就意味着编辑器的文本样式也会应用到占位节点上。 针对React占位节点的渲染，理论上而言之需要将其作为参数渲染到Editable编辑区域内即可。但是我们需要实现类似上述伪元素的实现，来确保占位节点的内容不会被用户编辑，那么这部分就需要用CSS来控制，即position + user-select + pointer-events。