如何在TinyMCE编辑器中加载本地自定义字体

问题背景 #

之前通过font_css加载Google字体的方式配置TinyMCE，现在需要替换成页面已通过@font-face引入的本地字体，让这些字体出现在编辑器的字体家族下拉菜单中并可应用到文本。

解决方案 #

只需修改TinyMCE的初始化配置，步骤如下：

1. 更新字体家族选项
   替换原有的fonts变量，按"下拉显示名称"=CSS中定义的font-family;格式添加本地字体，确保字体家族名称和CSS里@font-face的font-family完全一致。

2. 移除Google字体加载配置
   本地字体已通过页面CSS引入，无需保留font_css配置项。

修改后的完整代码 #

let fontSizes = '5px 6px 7px 8px 9px 10px 11px 12px 13px 14px 15px 16px 18px 20px 22px 24px 26px 28px 30px 32px 36px 40px 44px 48px 54px 60px 66px 72px 80px 90px 100px 120px 150px 200px 250px';
// 替换为本地字体，格式对应CSS中的font-family
let fonts = '"Lohit Malayalam"="Lohit Malayalam"; AnjaliOldLipi=AnjaliOldLipi; Authentic=Authentic; "Carlista Buttery"="Carlista Buttery"';
tinymce.init({
    selector: "textarea",
    plugins: [
        "advlist", "anchor", "autolink", "charmap", "code", "fullscreen", 
        "help", "image", "insertdatetime", "link", "lists", "media", 
        "preview", "searchreplace", "table", "visualblocks", 
    ],
    toolbar: "fontfamily fontsize",
    font_family_formats: fonts,
    font_size_formats: fontSizes
});

<textarea id="resource" name="resource"></textarea>

说明 #

页面中已存在的@font-face样式会被TinyMCE编辑器的内容区域继承，用户在下拉菜单选择对应字体后，文本会自动应用该本地字体样式。

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