如何为Django Admin的TinyMCE HTMLField设置默认字体族，确保粘贴文本强制使用该字体？

这个问题我之前碰到过好几次，完全可以解决！咱们从编辑器配置、粘贴处理和前端显示三个维度来搞定：

1. 强制设置TinyMCE编辑器的默认字体 #

首先要让编辑器内部的内容默认使用"Sofia Sans"，可以通过配置TinyMCE的内容样式来实现：

• 在Django项目的settings.py中，找到或新增TINYMCE_DEFAULT_CONFIG配置项，添加以下内容：

TINYMCE_DEFAULT_CONFIG = {
    # 保留你原有的其他配置，比如'height', 'width'等
    'content_css': '/static/css/custom.css',  # 指向你的自定义CSS文件路径
    'body_class': 'tiny-mce-editor-body',  # 给编辑器的body元素添加专属类
}

• 接着在你的custom.css中，针对这个专属类设置强制字体：

.tiny-mce-editor-body {
    font-family: "Sofia Sans", sans-serif !important;
}

2. 处理粘贴内容，清除外来字体样式 #

这是核心步骤，因为粘贴的文本往往自带inline字体样式，会覆盖编辑器的默认设置。我们可以通过TinyMCE的paste插件来自动清理：

• 确保paste插件已启用，在TINYMCE_DEFAULT_CONFIG的plugins中加入paste：

TINYMCE_DEFAULT_CONFIG = {
    # 其他配置...
    'plugins': 'paste',  # 如果已有其他插件，用逗号分隔，比如'paste,advlist,autolink'
    # 开启粘贴自动清理
    'paste_auto_cleanup_on_paste': True,
    'paste_remove_styles': True,  # 移除粘贴内容的所有样式
    'paste_remove_styles_if_webkit': True,  # 针对webkit内核浏览器的额外清理
    'paste_strip_class_attributes': 'all',  # 移除所有class属性
}

如果需要更精细的控制（比如只移除字体样式，保留其他格式如加粗、斜体），可以用setup函数监听粘贴事件，手动替换内容：

TINYMCE_DEFAULT_CONFIG = {
    # 其他配置...
    'setup': """
        function(editor) {
            editor.on('paste', function(e) {
                // 替换粘贴内容中所有font-family样式为Sofia Sans
                e.content = e.content.replace(/font-family:\s*[^;]+;/gi, 'font-family: "Sofia Sans", sans-serif;');
                // 如果想直接移除所有font-family样式，用下面这行：
                // e.content = e.content.replace(/font-family:\s*[^;]+;/gi, '');
            });
        }
    """,
}

3. 确保前端显示时强制使用默认字体 #

即使编辑器处理了，万一保存的内容里还有漏网的inline样式，我们可以在前端显示内容的容器上设置强制字体：

/* 假设你的内容显示容器类是content-display，替换成你实际的类名 */
.content-display * {
    font-family: "Sofia Sans", sans-serif !important;
}

这样不管内容里有没有inline字体样式，都会被覆盖成你想要的字体。

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