TinyMCE如何为H1、H2等标题设置指定专用字体

以下是两种常用的实现方案，可根据你的需求选择：

方法1：通过自定义内容CSS全局强制生效 #

该方案可以让编辑器内所有插入的H1、H2等标题自动应用预设字体，无需用户额外操作，最终输出的富文本也会继承对应样式：

• 找到你的TinyMCE初始化配置代码，添加content_style字段直接写入标题样式规则，示例如下：

tinymce.init({
  selector: 'textarea#your-editor',
  // 其他原有配置保持不变
  content_style: `
    h1 { font-family: '思源黑体 Bold', 'Microsoft YaHei Bold', sans-serif; font-size: 32px; }
    h2 { font-family: '思源黑体 Medium', 'Microsoft YaHei', sans-serif; font-size: 24px; }
    h3 { font-family: '思源黑体 Normal', 'Microsoft YaHei', sans-serif; font-size: 20px; }
    /* 可根据需求继续补充h4-h6的样式规则 */
  `
});

• 如果你的样式需要统一管理，也可以把content_style替换为content_css: '/path/to/your/custom.css'，把上述标题样式写在你独立的CSS文件中即可。
• 若要保证前端页面最终展示的富文本效果和编辑器内一致，记得把同样的标题样式规则也添加到前端页面的公共CSS文件里。

方法2：在样式下拉中添加可选的预定义标题样式 #

如果不需要全局强制所有标题用固定字体，希望给用户提供可选的预设标题选项，可以自定义样式下拉菜单：

• 首先确保你引入了style插件，然后在初始化配置中添加style_formats配置项，示例如下：

tinymce.init({
  selector: 'textarea#your-editor',
  plugins: 'style', // 确保已引入style插件
  toolbar: 'styles', // 工具栏添加styles下拉按钮
  style_formats: [
    { title: '一级标题', block: 'h1', styles: { 'font-family': "'思源黑体 Bold', sans-serif" } },
    { title: '二级标题', block: 'h2', styles: { 'font-family': "'思源黑体 Medium', sans-serif" } },
    { title: '三级标题', block: 'h3', styles: { 'font-family': "'思源黑体 Normal', sans-serif" } }
  ]
});

• 配置完成后用户可以直接在工具栏的样式下拉菜单中选择对应预设标题，选中后自动应用你设置的字体格式。

注意：如果你用了自定义的商用字体，需要确保编辑器所在页面和最终展示富文本的前端页面都已经正确引入对应的字体文件，否则字体不会正常生效。

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