React集成TinyMCE时添加本地下载字体的问题求助

针对你遇到的本地字体无法在TinyMCE编辑器中生效的问题，核心原因是编辑器内容区域运行在独立iframe中，外部CSS的字体路径或加载逻辑未适配这个隔离环境，以下是可行的解决步骤：

1. 确认字体文件路径与访问权限 #

将本地字体文件放置在项目的public目录下（比如public/assets/fonts/），确保编译后能通过绝对路径直接访问。调整index.css中的字体路径为绝对路径：

@font-face {
  font-family: "metrischmedium";
  src: url("/assets/fonts/Metrisch-Medium-webfont.eot");
  src: url("/assets/fonts/Metrisch-Medium-webfont.eot?#iefix") format("embedded-opentype"),
       url("/assets/fonts/Metrisch-Medium-webfont.woff2") format("woff2"),
       url("/assets/fonts/Metrisch-Medium-webfont.woff") format("woff"),
       url("/assets/fonts/Metrisch-Medium-webfont.ttf") format("truetype"),
       url("/assets/fonts/Metrisch-Medium-webfont.svg#metrischmedium") format("svg");
  font-weight: normal;
  font-style: normal;
}

2. 调整TinyMCE编辑器配置 #

方案一：通过content_css加载全局字体样式 #

确保content_css使用绝对路径，让iframe能正确加载包含字体定义的CSS文件：

<Editor
  onInit={/* 你的初始化逻辑 */}
  initialValue="<p>This is the initial content of the editor.</p>"
  init={{
    height: 500,
    menubar: true,
    plugins: ["advlist autolink lists link image charmap print preview anchor", "searchreplace visualblocks code fullscreen", "insertdatetime media table paste code help wordcount"],
    // 配置字体下拉选项，格式为「显示名称 = 字体族名」
    font_formats: "Metrisch Medium = metrischmedium;Helvetica=helvetica;Arial=arial;Sans-serif=sans-serif",
    toolbar: "undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help",
    // 使用绝对路径引入全局CSS
    content_css: "/index.css",
    content_style: "body { font-family: Helvetica,Arial,sans-serif,metrischmedium; font-size:14px }"
  }}
/>

方案二：直接在content_style中嵌入字体定义 #

如果content_css加载存在路径问题，可直接将@font-face写入content_style，确保字体定义直接注入到iframe的样式环境中：

<Editor
  onInit={/* 你的初始化逻辑 */}
  initialValue="<p>This is the initial content of the editor.</p>"
  init={{
    height: 500,
    menubar: true,
    plugins: ["advlist autolink lists link image charmap print preview anchor", "searchreplace visualblocks code fullscreen", "insertdatetime media table paste code help wordcount"],
    font_formats: "Metrisch Medium = metrischmedium;Helvetica=helvetica;Arial=arial;Sans-serif=sans-serif",
    toolbar: "undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help",
    content_style: `
      @font-face {
        font-family: "metrischmedium";
        src: url("/assets/fonts/Metrisch-Medium-webfont.eot");
        src: url("/assets/fonts/Metrisch-Medium-webfont.eot?#iefix") format("embedded-opentype"),
             url("/assets/fonts/Metrisch-Medium-webfont.woff2") format("woff2"),
             url("/assets/fonts/Metrisch-Medium-webfont.woff") format("woff"),
             url("/assets/fonts/Metrisch-Medium-webfont.ttf") format("truetype"),
             url("/assets/fonts/Metrisch-Medium-webfont.svg#metrischmedium") format("svg");
        font-weight: normal;
        font-style: normal;
      }
      body { font-family: Helvetica,Arial,sans-serif,metrischmedium; font-size:14px }
    `
  }}
/>

3. 验证字体加载状态 #

打开浏览器开发者工具的「Network」面板，筛选「Fonts」类型，确认字体文件是否成功加载（无404错误）。若加载失败，检查路径是否与实际文件位置匹配。

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