CKEditor 5字体与缩进模块违反CSP，如何适配严格无内联策略？

针对你遇到的字体、缩进功能触发CSP内联样式错误的问题，可通过以下步骤彻底解决：

• 配置编辑器用CSS类替代内联样式
  CKEditor5的缩进、字体模块支持通过配置切换为类名模式，避免生成内联style属性：
  初始化编辑器时添加如下配置：

  ClassicEditor
    .create(document.querySelector('#editor'), {
      // 缩进模块：用类替代内联margin
      indent: {
        indentClasses: ['indent-level-1', 'indent-level-2', 'indent-level-3'],
        outdentClasses: ['outdent-level-1'] // 如需右缩进可添加
      },
      // 字体大小：用类替代内联font-size
      fontSize: {
        options: [
          { title: '小号', class: 'font-size-sm' },
          { title: '默认', class: 'font-size-base' },
          { title: '大号', class: 'font-size-lg' }
        ]
      },
      // 字体族：用类替代内联font-family
      fontFamily: {
        options: [
          { title: '宋体', class: 'font-family-simsun' },
          { title: '微软雅黑', class: 'font-family-msyh' }
        ]
      }
    })
    .catch(error => {
      console.error(error);
    });
  

• 编写对应CSS类的样式
  在你随应用分发的自定义CSS文件中，添加上述类的具体样式：

  /* 缩进样式 */
  .indent-level-1 { margin-left: 2em; }
  .indent-level-2 { margin-left: 4em; }
  .indent-level-3 { margin-left: 6em; }
  .outdent-level-1 { margin-right: 2em; }
  
  /* 字体大小样式 */
  .font-size-sm { font-size: 0.875em; }
  .font-size-base { font-size: 1em; }
  .font-size-lg { font-size: 1.25em; }
  
  /* 字体族样式 */
  .font-family-simsun { font-family: 'SimSun', serif; }
  .font-family-msyh { font-family: 'Microsoft YaHei', sans-serif; }
  

• 确保构建与分发环节正确配置
  如果你是通过自定义构建（如Webpack或CKEditor Builder）打包编辑器，需将上述配置整合到构建流程中：

  • 若用CKEditor Builder，在自定义配置步骤直接添加上述选项；
  • 若用Webpack，将编辑器配置写入单独的配置文件并引入到构建入口。

完成以上步骤后，字体和缩进功能会通过添加CSS类来应用样式，不再生成内联style属性，完全符合你的严格CSP策略要求。

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