如何在TinyMCE中设置Inter字体为默认字体？

你尝试通过content_style修改TinyMCE字体，但因为编辑器运行在独立iframe中，无法直接调用页面已加载的Inter字体。你的Next.js字体加载代码如下：

import { Inter } from 'next/font/google'

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  )
}

方法一：直接在content_style中注入字体规则 #

Next.js的next/font会生成包含@font-face的完整样式规则，你可以把这些规则直接加到TinyMCE的content_style里，同时设置body的字体族：

import { Inter } from 'next/font/google';
import Editor from '@tinymce/tinymce-react';

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
});

// 渲染TinyMCE编辑器
<Editor
  init={{
    content_style: `
      ${inter.style.cssText}
      body {
        font-family: ${inter.style.fontFamily};
        margin: 1rem;
      }
    `,
    // 其他编辑器配置...
  }}
/>

inter.style.cssText包含了字体加载的全部规则，将其注入到TinyMCE的iframe样式中，就能让编辑器识别到Inter字体，再通过font-family设置为默认字体。

方法二：给编辑器iframe的body添加字体类名 #

借助TinyMCE的setup回调，在编辑器初始化完成后，给iframe内的body元素添加Next.js生成的Inter字体类名：

import { Inter } from 'next/font/google';
import Editor from '@tinymce/tinymce-react';

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
});

<Editor
  init={{
    setup: (editor) => {
      editor.on('init', () => {
        const editorBody = editor.getBody();
        editorBody.classList.add(inter.className);
      });
    },
    // 其他编辑器配置...
  }}
/>

这种方法复用了页面中已有的字体类样式，无需重复注入字体规则，适合需要统一页面与编辑器样式的场景。

内容的提问来源于stack exchange，提问作者Page not found