React中Jodit Editor自定义字体下拉预览失效问题求助

我在React项目的Jodit Editor组件中添加了自定义字体，但字体下拉菜单无法显示字体预览效果。已经尝试在配置中设置preview: true，但问题仍然存在。

我的配置代码 #

useEffect(() => {
    const configSettings = {
        controls: {
            font: {
                list: {
                    'Alegreya, serif': 'Alegreya',
                    'Alegreya Sans,sans-serif': 'Alegreya Sans',
                    'Alegreya Sans SC,sans-serif': 'Alegreya Sans SC',
                    'Alegreya SC,serif': 'Alegreya SC',
                    'Aleo,serif': 'Aleo',
                    'Assistant,sans-serif': 'Assistant',
                    'Barlow,sans-serif': 'Barlow',
                    'Barlow Condensed,sans-serif': 'Barlow Condensed',
                    'Barlow Semi Condensed,sans-serif': 'Barlow Semi Condensed',
                    'Bitter,serif': 'Bitter',
                    'Caladea,serif': 'Caladea',
                    'Dosis,sans-serif': 'Dosis',                      
                    'Roboto Slab,serif': 'Roboto Slab',
                    "'Slabo 13px',serif": 'Slabo 13px',
                    "'Slabo 27px',serif": 'Slabo 27px',
                    'Titillium Web,sans-serif': 'Titillium Web'
                },
                preview: true,
                // 其他配置项
            }
        }
    };
    // 将配置应用到Jodit编辑器实例
}, []);

当前问题：字体下拉菜单仅显示文字名称，没有对应字体的样式预览。

解决方法 #

1. 确认字体已正确加载
   先检查自定义字体是否在项目中成功引入：

   • 通过@font-face在全局CSS中声明字体，确保文件路径正确：

     @font-face {
         font-family: 'Alegreya';
         src: url('/fonts/Alegreya-Regular.ttf') format('truetype');
         font-weight: normal;
         font-style: normal;
     }
     

   • 打开浏览器开发者工具的「网络」面板，过滤字体文件，确认没有404错误。

2. 修正字体列表的键格式
   Jodit的字体列表键必须是标准的CSS字体栈，带空格的字体名称需要用单引号包裹，否则浏览器无法正确识别。比如：

   list: {
       "'Alegreya', serif": 'Alegreya',
       "'Alegreya Sans', sans-serif": 'Alegreya Sans',
       "'Barlow Condensed', sans-serif": 'Barlow Condensed',
       // 所有带空格的字体都按此格式修正
   }
   

3. 升级Jodit版本
   部分旧版本Jodit存在字体预览的兼容性问题，执行命令升级到最新稳定版：

   npm update jodit-react
   

4. 强制覆盖默认样式
   如果以上方法无效，添加全局CSS强制下拉项应用对应字体：

   .jodit-ui-font-list__item {
       font-family: inherit !important;
   }
   

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