PrestaShop 1.7.7.6自定义TinyMCE编辑器配置无效果求助

看起来你已经走对了核心方向，但可能在几个细节上踩了坑，我来帮你逐一排查修复：

1. 修正自定义配置的语法与合并逻辑 #

你当前的配置代码存在两处可能导致失效的问题：

window.defaultTinyMceConfig = { toolbar2: 'styleselect,|,formatselect,|,fontselect,|,fontsizeselect,', }

• 结尾的多余逗号：fontsizeselect, 最后的逗号会触发JS解析错误，导致配置无法被正确读取
• 首尾的分隔符：工具栏分隔符|不需要放在开头或结尾，反而可能干扰按钮渲染逻辑

建议改为合并原有配置的写法（避免完全覆盖默认配置，保留PrestaShop原有工具栏功能）：

// 合并到现有默认配置，而非直接替换
window.defaultTinyMceConfig = Object.assign(window.defaultTinyMceConfig || {}, {
    toolbar2: 'styleselect,formatselect,fontselect,fontsizeselect',
    // 引入自定义CSS文件（实现特定区块布局）
    content_css: prestashop.urls.base_url + 'modules/你的模块名/css/custom-tinymce.css',
    // 自定义样式选择器的可选选项（按需添加）
    style_formats: [
        {title: '自定义标题区块', block: 'div', classes: 'custom-heading-block'},
        {title: '高亮文本', inline: 'span', classes: 'highlight-text'}
    ]
});

2. 确认钩子实现的正确性 #

确保你的actionAdminControllerSetMedia钩子代码正确加载了JS和CSS文件，比如在模块的主PHP文件中：

public function hookActionAdminControllerSetMedia($params)
{
    // 加载自定义TinyMCE配置JS
    $this->context->controller->addJS($this->_path . 'js/TinyMceConfig.js');
    // 加载供TinyMCE使用的自定义CSS
    $this->context->controller->addCSS($this->_path . 'css/custom-tinymce.css');
}

注意：路径要和你实际的文件位置对应，比如模块名为customtinymce，路径就是modules/customtinymce/js/...，同时确认模块已在后台启用。

3. 彻底清除所有缓存 #

除了删除/var/cache文件夹，你还需要：

• 强制刷新浏览器缓存（Ctrl+F5 或 Cmd+Shift+R），避免浏览器加载旧的JS文件
• 在PrestaShop后台的「高级参数 > 性能」中，点击「清除缓存」按钮，确保后台的模板缓存也被清空

4. 验证配置是否被正确读取 #

打开产品/页面编辑页面，按下F12打开浏览器控制台，输入console.log(window.defaultTinyMceConfig)，检查输出的对象：

• 如果输出为undefined，说明你的JS文件没有被正确加载，检查钩子路径或模块是否启用
• 如果配置存在但工具栏没变化，可能是当前页面的TinyMCE实例使用了单独配置，需要确认是否有其他代码覆盖了全局设置

5. 检查版本兼容性 #

PrestaShop 1.7.7.6内置的TinyMCE版本是4.x，你使用的fontselect、styleselect等配置项在这个版本中完全兼容，但如果后续添加其他自定义功能，需要注意匹配4.x版本的API规范。

按照以上步骤调整后，你的TinyMCE应该就能正常显示字体选择器、样式选择器，并加载自定义CSS了。

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