ReactJS中TinyMCE自定义印地语字体输入异常问题

你遇到的核心问题是对DevLys/Kruti Dev这类印地语字体的工作逻辑理解有误：这类字体属于键盘映射字体，并非普通Unicode字体。Microsoft Word里的“英文键盘输入印地语”体验，是因为Word配合了对应输入法/字符映射机制，将你输入的英文字符自动转换为对应的印地语Unicode字符，再用这类字体渲染；而TinyMCE仅负责字体渲染，不会自动帮你完成输入字符的转换——你输入的仍是英文字符，字体自然只会显示英文。

以下是具体解决步骤：

1. 先修正字体配置的小问题 #

你的字体配置存在两处细节错误，先修正确保字体能正常加载渲染：

• font_family_formats 中等号后多余的空格会导致TinyMCE识别字体名失败，需删除
• React项目中字体文件路径需对应实际位置（若使用create-react-app，建议将字体放在public/fonts目录下）

修改后的编辑器配置 #

<Editor
  onInit={(evt, editor) => editorRef.current = editor}
  initialValue={props.data}
  init={{
    selector: 'textarea',
    language: 'hi',
    height: 500,
    menubar: false,
    plugins: [
      'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
      'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
      'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
    ],
    toolbar: 'undo redo | fontfamily | ' +
      'bold italic forecolor | alignleft aligncenter ' +
      'alignright alignjustify | bullist numlist outdent indent | ' +
      'removeformat | help',
    // 去掉等号后的空格
    font_family_formats: "KrutiDev=KrutiDev; Courier New=courier new,courier; DevLys=DevLys; Helvetica=helvetica; Symbol=symbol;",
    content_css: "./App.css",
    content_style: "body { font-family:DevLys; font-size:14px }"
  }}
/>

修改后的App.css（字体放public/fonts目录时） #

@font-face {
  font-family: 'DevLys';
  src: url('/fonts/DevLys_010.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'KrutiDev';
  src: url('/fonts/KRDEV010.ttf') format('truetype');
  font-display: swap;
}

2. 实现“英文键盘输入印地语”的核心方案 #

要复刻Word的体验，需完成输入字符到印地语Unicode的转换，有两种可行方式：

方案一：使用印地语输入法（最简单） #

直接使用系统自带的印地语输入法（如微软印地语输入法）或第三方工具（如Google Input Tools），直接输入印地语Unicode字符，再选中DevLys/Kruti Dev字体渲染——此时字符本身是印地语，字体仅负责显示样式，就能得到你想要的效果。

方案二：自定义键盘映射转换（需开发） #

如果必须用英文键盘输入，需自己实现字符映射逻辑：

1. 找到DevLys/Kruti Dev对应的标准键盘映射表（比如Kruti Dev 010的布局）
2. 在TinyMCE的setup回调中监听输入事件，将英文字符替换为对应的印地语字符

示例代码：

<Editor
  // 其他配置...
  init={{
    // 其他配置...
    setup: (editor) => {
      // 示例：Kruti Dev 010的部分字符映射（需补充完整映射表）
      const krutiDevMap = {
        'a': 'अ',
        'b': 'ब',
        'c': 'च',
        'd': 'द',
        // 更多字符映射...
      };

      editor.on('keydown', (e) => {
        // 仅当前选中目标字体时触发转换
        const currentFont = editor.dom.getStyle(editor.selection.getNode(), 'font-family');
        if (currentFont.includes('KrutiDev') || currentFont.includes('DevLys')) {
          const inputChar = String.fromCharCode(e.keyCode).toLowerCase();
          if (krutiDevMap[inputChar]) {
            e.preventDefault();
            editor.insertContent(krutiDevMap[inputChar]);
          }
        }
      });
    }
  }}
/>

总结 #

• 先修正字体配置确保字体能正常渲染印地语字符
• 核心需求的本质是输入字符的转换，而非单纯的字体加载，要么用输入法直接输入印地语，要么自定义映射逻辑实现英文到印地语的转换

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