Django新手集成TinyMCE遇难题，求教插件与字体设置方法

作为过来人特别理解你作为Django新手集成TinyMCE时的迷茫——我刚上手的时候也对着一堆配置项懵圈过！别着急，咱们一步步来拆解插件设置、字体调整这些核心需求，都是实操性很强的步骤：

首先得确保TinyMCE和Django的基础联动是通的，这里分两种常用方式：

• 用官方django-tinymce包：先执行pip install django-tinymce，然后把tinymce添加到settings.py的INSTALLED_APPS里，再在项目根urls.py中加入path('tinymce/', include('tinymce.urls'))。
• 用CDN直接引入：在你的模板文件里，在</body>前加入TinyMCE的JS链接（需要去TinyMCE官网申请免费API_KEY）：

<script src="https://cdn.tiny.cloud/1/你的API_KEY/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>

TinyMCE的插件分内置（比如列表、链接、代码编辑）和第三方两种，配置方式分两种场景：

场景1：用django-tinymce包时的配置 #

在settings.py里添加TINYMCE_DEFAULT_CONFIG字典，直接指定要启用的插件和对应的工具栏按钮：

TINYMCE_DEFAULT_CONFIG = {
    # 要启用的插件，用空格分隔
    'plugins': 'advlist autolink lists link image charmap print preview code',
    # 工具栏显示的按钮，| 用来分组
    'toolbar': 'undo redo | bold italic underline | alignleft aligncenter | bullist numlist | link image | code',
    # 其他基础配置（可选）
    'height': 500,
    'width': '100%',
}

解释：plugins里的每个值都是插件的官方名称，比如code对应代码编辑插件，lists对应有序/无序列表插件；toolbar是把插件的功能按钮展示出来，方便用户点击。

如果要加第三方插件，需要把插件的文件夹放到项目的static/tinymce/plugins目录下，然后在plugins里加上插件名称即可。

场景2：用CDN时的配置 #

在模板里直接写JS初始化代码，指定插件和工具栏：

<script>
tinymce.init({
  // 匹配你的textarea元素，Django表单自动生成的ID是id_字段名，比如id_content
  selector: '#id_content',
  plugins: 'advlist autolink lists link',
  toolbar: 'undo redo bold italic | bullist numlist link'
});
</script>

字体设置主要包括自定义字体家族和字体大小，同样分两种配置场景：

用django-tinymce包时的配置 #

在TINYMCE_DEFAULT_CONFIG里添加字体相关参数：

TINYMCE_DEFAULT_CONFIG = {
    # 其他配置...
    # 自定义字体家族，格式："显示名=字体1,字体2,..."
    'font_formats': 'Arial=arial,helvetica,sans-serif; Courier New=courier new,courier,monospace; 微软雅黑=Microsoft YaHei,SimHei;',
    # 自定义字体大小选项
    'fontsize_formats': '8pt 10pt 12pt 14pt 18pt 24pt 36pt',
    # 把字体选择按钮加到工具栏
    'toolbar': 'undo redo | fontselect fontsizeselect | bold italic | ...',
}

用CDN时的配置 #

在JS初始化代码里加入字体配置：

<script>
tinymce.init({
  selector: '#id_content',
  font_formats: 'Arial=arial,helvetica,sans-serif; 微软雅黑=Microsoft YaHei,SimHei;',
  fontsize_formats: '8pt 10pt 12pt 14pt 18pt 24pt 36pt',
  toolbar: 'fontselect fontsizeselect | bold italic | undo redo'
});
</script>

• 注意textarea的ID匹配：Django表单自动生成的textarea ID是id_你的字段名，比如你的模型字段叫content，那模板里的元素ID就是id_content，一定要和tinymce.init里的selector对应上。
• 如果用ModelForm，直接用TinyMCEWidget更省心：

from tinymce.widgets import TinyMCE
from django import forms
from .models import Article

class ArticleForm(forms.ModelForm):
    class Meta:
        model = Article
        fields = ('title', 'content')
        widgets = {
            'content': TinyMCE(attrs={'cols': 80, 'rows': 30})
        }

• 静态文件加载问题：如果用本地部署的TinyMCE，记得在生产环境执行python manage.py collectstatic，确保静态文件能被正确访问。

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