含Base64编码img标签的HTML转Lexical JS时图片丢失的解决方法

核心原因 #

Lexical的$generateNodesFromDOM不会自动处理所有HTML节点，默认情况下如果未注册ImageNode或对应的DOM转换规则，img标签会被直接忽略。

解决方案步骤 #

1. 注册ImageNode插件 #

首先要在编辑器初始化时注册ImageNode，这是处理图片节点的基础：

import { createEditor } from 'lexical';
import { ImageNode } from '@lexical/image';

const editor = createEditor({
  nodes: [ImageNode], // 注册ImageNode
});

2. 自定义img标签转换规则 #

如果注册ImageNode后仍无法识别img标签，需要手动添加转换逻辑，通过$generateNodesFromDOM的参数传入自定义转换器：

import { $generateNodesFromDOM } from '@lexical/html';
import { $createImageNode } from '@lexical/image';
import { $getRoot } from 'lexical';

// 自定义img元素转换函数
function convertImgElement(domNode) {
  if (domNode.tagName !== 'IMG') return null;
  
  const src = domNode.getAttribute('src');
  const alt = domNode.getAttribute('alt') || '';
  const width = domNode.getAttribute('width');
  const height = domNode.getAttribute('height');
  
  return $createImageNode({
    src,
    alt,
    width: width ? parseInt(width, 10) : undefined,
    height: height ? parseInt(height, 10) : undefined,
  });
}

// 在编辑器事务中执行转换
editor.update(() => {
  const domParser = new DOMParser();
  const htmlDoc = domParser.parseFromString(yourHtmlContent, 'text/html');
  const nodes = $generateNodesFromDOM(editor, htmlDoc.body, {
    converters: {
      img: convertImgElement, // 绑定img标签的转换规则
    },
  });
  
  // 将转换后的节点插入编辑器根节点
  const root = $getRoot();
  root.clear();
  nodes.forEach(node => root.append(node));
});

3. 验证Base64格式有效性 #

确认你的Base64图片URL符合标准格式，例如：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...

格式错误会导致即使转换成功也无法正常显示图片。

关键注意事项 #

• 所有Lexical节点操作必须在editor.update()的回调中执行，因为Lexical的状态更新是事务性的。
• 若使用@lexical/react，建议在useEffect中执行转换逻辑，确保编辑器已完成初始化。

内容的提问来源于stack exchange，提问作者wenbert