Kentico 13（v13.0.124）中如何为Froala编辑器应用样式？

Kentico 13自带的「CSS stylesheet for WYSIWYG editor」设置确实仅适配CKEditor，针对Froala编辑器的样式配置需要通过自定义JS和CSS来实现，以下是具体步骤：

1. 自定义Froala编辑器配置（覆盖默认设置） #

你需要通过自定义JavaScript修改Froala的styleSet和useClasses参数，确保配置生效：

• 在项目中创建自定义JS文件（如CustomFroalaConfig.js），写入以下代码：

document.addEventListener('DOMContentLoaded', function() {
    // 等待Froala加载完成后执行配置
    if (typeof FroalaEditor !== 'undefined') {
        // 定义自定义样式集合（useClasses设为false时使用inline样式）
        FroalaEditor.defaults.styleSet = [
            {name: '红色强调文本', style: 'color: #dc3545;'},
            {name: '灰色背景段落', style: 'background-color: #f8f9fa; padding: 8px; border-radius: 4px;'},
            {name: '大字号标题', style: 'font-size: 28px; font-weight: 700; margin: 16px 0;'}
        ];
        // 强制使用inline样式而非类
        FroalaEditor.defaults.useClasses = false;

        // 为编辑器注入自定义样式表到预览iframe
        FroalaEditor.defaults.events['initialized'] = function() {
            const styleLink = document.createElement('link');
            styleLink.rel = 'stylesheet';
            styleLink.href = '/assets/css/FroalaCustomStyles.css'; // 替换为你的CSS文件路径
            this.$iframe[0].contentDocument.head.appendChild(styleLink);
        };
    }
});

• 将该JS文件注册到Kentico中：
  • 方式1：在站点管理器 > 页面模板中，找到使用Froala的模板，在脚本区域添加该文件引用；
  • 方式2：在设置 > 系统 > 性能 > 脚本文件中添加全局引用，确保所有使用Froala的页面都能加载。

2. 编写编辑器预览样式（可选） #

如果需要让编辑器的预览区域更贴近前端展示效果，创建对应CSS文件（如FroalaCustomStyles.css）：

/* 编辑器预览区域全局样式 */
.fr-wrapper .fr-editor {
    font-family: 'Segoe UI', sans-serif;
    line-height: 1.6;
}

/* 若后续切换为useClasses: true，可定义类样式 */
.custom-highlight {
    background-color: #fff3cd;
    border-left: 4px solid #ffc107;
    padding: 6px 12px;
}

3. 验证配置生效 #

• 清除Kentico系统缓存（站点管理器 > 系统 > 缓存 > 清除缓存），避免旧配置残留；
• 打开使用Froala编辑器的内容编辑页面，点击编辑器的「样式」下拉菜单，检查自定义样式是否显示，应用后查看预览区域是否生效。

常见问题排查 #

• 检查浏览器控制台是否有JS报错，比如文件路径错误、Froala对象未加载完成等；
• 确认自定义JS的加载顺序：必须在Kentico自带的Froala脚本之后加载，否则无法覆盖默认配置；
• 若useClasses: false仍未生效，可在initialized事件中添加console.log(this.options.useClasses)，验证当前配置值是否被正确设置。

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