TinyMCE富文本编辑器字体设置与自定义配置指南

在Web开发中，TinyMCE作为一款功能强大的富文本编辑器，其字体设置与自定义功能对提升用户体验至关重要。本文将详细介绍如何通过配置font_formats、content_css、content_style等参数实现字体选项的自定义和默认字体的设置

字体选项自定义

通过font_formats选项，可以定义编辑器字体选择下拉菜单中显示的字体列表。以下是一个配置示例：

tinymce.init({
  selector: 'textarea',
  font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif; 苹果苹方=PingFang SC,Microsoft YaHei,sans-serif; 宋体=simsun,serif; 黑体=SimHei,sans-serif; Arial=arial,helvetica,sans-serif',
  // 其他配置...
});

此配置将"微软雅黑"、"苹果苹方"等中文字体与常见英文字体加入下拉菜单

自定义字体文件引入

若需使用非系统自带字体，需通过CSS定义字体文件，并在TinyMCE配置中引入该CSS文件。

定义字体文件

/* custom-fonts.css */
@font-face {
  font-family: 'MyCustomFont';
  src: url('path/to/font.woff2') format('woff2'),
       url('path/to/font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

引入CSS文件

tinymce.init({
  selector: 'textarea',
  content_css: 'path/to/custom-fonts.css',
  font_formats: 'MyCustomFont=MyCustomFont,Arial=arial,sans-serif',
  // 其他配置...
});

默认字体样式设置

通过以下两种方式设置编辑器初始字体：

使用content_style选项

tinymce.init({
  selector: 'textarea',
  content_style: 'body { font-family: "Microsoft YaHei", sans-serif; font-size: 14px; }',
  // 其他配置...
});

/* 需在引入的CSS文件中定义 */
.default-font {
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 14px;
}

完整配置示例

tinymce.init({
  selector: 'textarea',
  plugins: 'advlist lists link image',
  toolbar: 'undo redo | fontselect fontsizeselect | bold italic',
  font_formats: '微软雅黑=Microsoft YaHei; 苹果苹方=PingFang SC; 宋体=simsun; 黑体=SimHei; Arial=arial',
  fontsize_formats: '12px 14px 16px 18px 24px 36px',
  content_style: 'body { font-family: "Microsoft YaHei", sans-serif; font-size: 14px; }',
  content_css: '/path/to/custom-fonts.css' // 如需使用自定义字体文件
});

注意事项

1. 字体名称需包含中英文版本，并用分号分隔3
2. 使用自定义字体文件时，需确保文件路径正确且服务器允许跨域访问
3. 修改配置后需清除浏览器缓存测试效果
4. 中文环境下建议优先使用"Microsoft YaHei"、"PingFang SC"等系统自带中文字体