如何通过脚本多次动态修改CKEditor 4的样式？

算力阿峰

2026-8-25

解决CKEditor 4动态切换预定义样式的问题

直接修改config.stylesSet仅在编辑器初始化前有效，因为编辑器实例启动后会缓存样式集配置，后续修改不会自动触发更新。要实现动态切换样式，需要手动让样式插件重新加载样式定义：

解决方案代码修改

CKEDITOR.stylesSet.add( 'my_styles', [
    // Block-level styles
    { name: 'Blue Title', element: 'h2', styles: { 'color': 'Blue' } },
    { name: 'Red Title' , element: 'h3', styles: { 'color': 'Red' } },

    // Inline styles
    { name: 'CSS Style', element: 'span', attributes: { 'class': 'my_style' } },
    { name: 'Marker: Yellow', element: 'span', styles: { 'background-color': 'Yellow' } }
] );

CKEDITOR.stylesSet.add( 'my_styles2', [
    // Block-level styles
    { name: 'Default Title', element: 'h2', styles: { 'color': 'Red' } },

    // Inline styles
    { name: 'CSS Style', element: 'span', attributes: { 'class': 'my_style' } },
] );

var ckeditor = CKEDITOR.inline('editor1', {
    removePlugins: 'exportpdf,sourcearea',
    fillEmptyBlocks : false,
    stylesSet: 'my_styles' // 初始化时指定默认样式集
});

// 延迟测试切换样式
setTimeout(() => { 
    console.log("切换到my_styles2样式");
    setStyle('my_styles2');
}, 5000);

function setStyle(styleSetName) {
    // 更新编辑器实例的样式集配置
    ckeditor.config.stylesSet = styleSetName;
    
    // 获取样式下拉框插件实例
    const stylesCombo = ckeditor.getPlugin('stylescombo');
    
    // 清除插件缓存的样式数据
    stylesCombo._styles = null;
    
    // 重新初始化样式并刷新下拉框
    stylesCombo.initStyles();
    stylesCombo.refresh(ckeditor);
}