说实话，现在的Web开发圈子里富文本编辑器简直就是“轮子”界的重灾区。你kankan，市面上那些老牌的像CKEditor、KindEditor，还有后来居上的Quill、Slate，甚至还有那个收费贵得离谱的TinyMCE。它们有的老态龙钟，有的配置繁琐得让人头秃。虽然我也知道，作为一个理智的工程师，应该优先选择成熟的方案，但内心深处那个“造轮子”的小火苗总是扑不灭。毕竟谁不想拥有一款完全听自己指挥、随心所欲的编辑器呢？哪怕时间总是不够用，哪怕头发会掉几根，但这趟从零开始的旅程，绝对值得。

Zui近在折腾前端项目的时候，我突发奇想，决定不再忍受那些现成库的各种限制，干脆自己动手搞一个。这不仅仅是为了写代码，geng像是一场对浏览器底层机制的探索。今天我就把这段充满血泪的经历整理出来咱们不搞那些虚头巴脑的理论，直接聊聊怎么从零开始，一步步搭建一个属于你自己的富文本编辑器。

一切的开始，dou源于那个神奇的属性——ContentEditable。这玩意儿简直是浏览器给开发者开的一扇后门，只要给一个div加上这个属性，它瞬间就Neng变成一个可编辑的区域。但是事情真的这么简单吗？显然不是。

我们在设计编辑器的时候，不仅要Neng写，还得Neng“kan”。这就是只读模式的需求。理论上，只读模式太容易实现了只要把ContentEditable的值改成false，浏览器就会乖乖地锁住这个区域，不让用户修改。这完全属于视图层的行为，在React里也就是控制一下DOM属性的事儿。

export const BlockKit: React.FC = props => {
  if  !== readonly) {
    editor.state.set;
  }
  // ...后续渲染逻辑
}

但是现代富文本编辑器早就不是只放文字和图片那么简单了。视频、表格、代码块、附件、数学公式……这些复杂的模块dou要塞进去。在只读模式下这些模块不仅要不可编辑，还得把那些浮动的工具栏、弹出的菜单统统藏起来。这就涉及到状态感知的问题了。在React里我们Ke以利用Context来传递这个只读状态，让子组件douNeng感知到当前是不是“静默模式”。

const ReadonlyContext = createContext;
ReadonlyContext.displayName = "Readonly";
const useReadonly =  => {
  const readonly = React.useContext;
  return { readonly };
};
// 在组件中使用
const { readonly } = useReadonly;

通过这种方式，当只读状态切换时所有的工具栏、交互面板douNeng立刻Zuo出反应，要么消失，要么变成纯展示。这种状态的一致性，比单纯修改DOM属性要可靠得多。

你有没有遇到过这种情况？打开一个编辑器，里面空空如也，你不知道该往哪儿打字。原生的input和textareadou有placeholder属性，但在ContentEditable的世界里浏览器可没给你提供这玩意儿。所以我们得自己造。

实现占位符的思路有hen多，Zui经典的大概要数Quill编辑器用的CSS伪元素法。利用::before或者::after，把提示文字画在编辑区域的底层。

.block-kit-x-editable div::before {
  color: #bbbfc4;
  content: attr;
  height: 0;
  pointer-events: none;
  position: absolute;
}

这种Zuo法有个巨大的好处：伪元素不属于DOM树，ContentEditable根本kan不见它。用户没法选中它，光标也不会被它干扰。它就像一个幽灵，静静地待在那里等你一输入，它就消失。配合pointer-events: none，连鼠标事件dou穿透了简直完美。

不过Ru果你用的是React，可Nenggeng倾向于用组件来渲染占位符。这时候就要小心了。Ru果你直接把占位符组件扔进编辑区域，得确保它不会被用户编辑。这就需要用CSS来控制它的positionuser-select和pointer-events。

  {props.placeholder}

还有一个特别坑爹的地方：中文输入法。当用户正在用拼音输入法“组词”的时候，那个composing状态还没结束，这时候Ru果占位符突然闪现或者消失，会导致选区计算错乱，甚至输入法崩溃。所以我们得专门写个Hook来监听这个状态，在isComposing为true的时候，强行把占位符按住别动。

export const Placeholder: FC<{
  editor: Editor;
  lines: LineState;
  placeholder: React.ReactNode | undefined;
}> = props => {
  const { isComposing } = useComposing;
  return props.placeholder &&
    !isComposing &&
    props.lines.length === 0 &&
    isEmptyLine ? (
    

      {props.placeholder}
    
  ) : null;
};

Ru果你把占位符直接放在容器下面那它就是个纯文本。但Ru果你希望占位符也Neng继承编辑器的样式，那就得把它塞进Leaf节点里去。像Slate就是这么干的，占位符被渲染在leaf区域内，这样编辑器的文本样式就Neng自动应用到占位符上了。当然这也意味着你的代码结构要稍微复杂一点，毕竟要在渲染树的geng深层去处理它。

好了基础的东西搞定了接下来才是真正的硬骨头：怎么把数据变成DOM？

富文本编辑器的数据模型通常是一堆Line或者Block，每个Block里又有一堆Leaf。我们要Zuo的，就是把这些扁平的数据，转换成嵌套的HTML标签。比如一段文字既加粗又是斜体，还包含一个超链接，这在DOM里就是这种结构。

Zui简单的办法是遍历Leaf，一个个渲染。但这样会有个问题：Ru果相邻的Leaf样式一样，比如三个Leafdou是加粗，你难道要生成三个标签吗？那样不仅DOM冗余，复制粘贴的时候还容易出问题。所以我们需要一个“合并”逻辑。

const elements = useMemo => {
  const leaves = lineState.getLeaves;
  // 
渲染所有非 EOL 的叶子节点
  const textLeaves = leaves.slice;
  const nodes = textLeaves.map(n => {
    const node = ;
    JSX_TO_STATE.set;
    return node;
  });
  return nodes;
}, );

  part a
  part b

// 执行到此处说明需要包装相关节点
const nodes: JSX.Element = ;
for  {
  const next = elements;
  const nextSymbol = getWrapSymbol;
  if  {
    // 回退到上一个值, 以便下次循环时重新检查
    i = k - 1;
    break;
  }
  nodes.push;
  i = k;
}

export const getWrapSymbol = : string | null => {
  const attrs = state.op.attributes;
  const suite: string = ;
  for  {
    attrs && suite.push;
  }
  const symbol = suite.join;
  return symbol;
};

// 通过插件渲染包装节点
let wrapper: React.ReactNode = nodes;
const op = line.op;
for  {
  // 这里的状态以首个节点为准
  const context: ReactWrapLineContext = {
    lineState: line,
    children: wrapper,
  };
  if  && plugin.wrapLine) {
    wrapper = plugin.wrapLine;
  }
}
const key = `${i - nodes.length + 1}-${i}`;
wrapped.push;

if  {
  this.mountSuggestNode = document.createElement;
  this.mountSuggestNode.dataset.type = "mention";
  MountNode.get.appendChild;
}
// ...计算位置
ReactDOM.render(
  , 
  dom
);

const PortalView: FC<{ editor: Editor }> = props => {
  const  = useState;
  EDITOR_TO_PORTAL.set;
  return (
    
      {Object.entries.map => (
        {node}
      ))}
    
  );
};

const portal = ReactDOM.createPortal(
  ,
  document.body,
);
// 实际上这里不需要再 ReactDOM.render，Portal 本身就是 React Node