如何为Lexical编辑器设置默认字体族？

方法1：通过全局CSS覆盖 #

直接给Lexical编辑器的根容器设置字体族，这是最简单的方式，新输入的文本会自动继承这个字体：

.lexical-editor {
  font-family: 'Roboto', 'Helvetica Neue', sans-serif; /* 替换成你的默认字体 */
}

方法2：自定义Lexical主题 #

利用Lexical的主题系统配置根节点样式，更贴合编辑器的样式管理逻辑：

const customEditorTheme = {
  root: {
    fontFamily: "'Open Sans', sans-serif",
    fontSize: '16px',
    lineHeight: 1.5,
    // 可添加其他全局样式
  },
  // 其他主题节点配置（如paragraph, heading等）可按需补充
};

// 在Editor组件中应用主题
<Editor 
  theme={customEditorTheme} 
  initialConfig={{ 
    namespace: 'my-editor',
    onError: (error) => console.error(error),
    // 你的其他编辑器初始化配置
  }} 
/>

方法3：从节点层面设置默认格式（保留到内容中） #

如果需要让字体格式被持久化保存到编辑器内容里（而非仅样式层面），可以在编辑器初始化时给默认段落节点设置字体属性：

import { $getRoot, $createParagraphNode, $createRangeSelection, $setSelection } from 'lexical';
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import { useEffect } from 'react';

function MyCustomEditor() {
  const [editor] = useLexicalComposerContext();

  useEffect(() => {
    return editor.registerUpdateListener(({ editorState }) => {
      editorState.read(() => {
        const root = $getRoot();
        // 仅在编辑器为空时初始化默认格式
        if (root.getChildrenSize() === 0) {
          const defaultParagraph = $createParagraphNode();
          // 设置字体族
          defaultParagraph.setFormat('fontFamily', 'Georgia, serif');
          root.append(defaultParagraph);
          // 将光标定位到新段落
          const selection = $createRangeSelection();
          selection.select(defaultParagraph.getKey(), 0);
          $setSelection(selection);
        }
      });
    });
  }, [editor]);

  return (
    <LexicalComposer initialConfig={{ /* 你的初始化配置 */ }}>
      {/* 编辑器UI组件 */}
    </LexicalComposer>
  );
}

选择建议 #

• 仅需要展示层面的默认字体：用方法1或方法2即可
• 需要字体格式随内容保存：用方法3

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