SAP Spartacus - 段落组件中的内联样式 (SmartEdit)答案

【问题标题】：SAP Spartacus - Inline styles in Paragraph component (SmartEdit)SAP Spartacus - 段落组件中的内联样式 (SmartEdit)
【发布时间】：2021-11-23 20:33:14
【问题描述】：

我一直在尝试使用 SmartEdit 中 Paragraph 组件中最简单的 OOTB 功能之一（来自 SAP Commerce 全新安装的 Spartacus 店面）——在富文本编辑器中为某些文本添加颜色——但似乎就像组件清理 HTML 一样，因此删除了我的样式。

复制步骤：

在全新的 Spartacus v3.2.1 安装中，访问 SmartEdit
添加段落组件：
在富文本编辑器中添加一些内联样式并保存：
检查结果：
很明显，Angular 组件已经删除了内联样式，但只是为了确认：

显而易见/最简单的解决方案是：

创建一个SafeHtmlPipe 以利用DomSanitizer
然后扩展 OOTB 段落组件
并在所需元素上使用管道（如另一个 StackOverflow 线程中所述：Angular2 innerHtml binding remove style attribute）

但是这是预期的 OOTB 行为还是我在安装项目时（或配置设置时）做错了什么？

如果这是预期的行为，则意味着某些 OOTB 功能在没有一些编码的情况下实际上无法使用，这非常令人失望。

当我们有很多使用富文本编辑器或 HTML 输入字段的组件时，我们该怎么办？我们要扩展它们吗？

【问题讨论】：

CMSParagraphComponent 是 CMS 组件类型。如果您修改 ParagraphComponent 的实现，这些更改将应用于此类型的所有组件。
@WeizhengGao 有没有办法覆盖 CMS 组件的特定实例？

标签： css angular hybris spartacus-storefront smartedit

【解决方案1】：

是的，并非所有的 OOTB 都能正常工作。

如您所述，您可以自行解决此问题，将默认 CMSParagraphComponent 替换为您的自定义：

export const paragraphCmsConfig: CmsConfig = {
  cmsComponents: {
    CMSParagraphComponent: {
      component: YourParagraphComponent,
    },
  },
}

在YourParagraphComponent 内部扩展给定的ParagraphComponent

@Component({
  selector: 'your-paragraph',
  templateUrl: './your-paragraph.component.html',
  styleUrls: ['./your-paragraph.component.scss'],
})
export class YourParagraphComponent extends ParagraphComponent {}

并实现你自己的SafeHtmlPipe

<div class="your-paragraph" *ngIf="component.data$ | async as data" [innerHTML]="data.content | trust: 'html'"></div>

在我们的例子中，管道被命名为trust

@Pipe({
  name: 'trust',
})
export class YourSafeHtmlPipe implements PipeTransform {
  constructor(protected sanitizer: DomSanitizer) {}

  public transform(
    value: any,
    type: string
  ): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    switch (type) {
      case 'html':
        return this.sanitizer.bypassSecurityTrustHtml(value)
      case 'style':
        return this.sanitizer.bypassSecurityTrustStyle(value)
      case 'script':
        return this.sanitizer.bypassSecurityTrustScript(value)
      case 'url':
        return this.sanitizer.bypassSecurityTrustUrl(value)
      case 'resourceUrl':
        return this.sanitizer.bypassSecurityTrustResourceUrl(value)
      default:
        throw new Error(`Invalid safe type specified: ${type}`)
    }
  }
}

在一个模块中连接在一起并将其导入到您的自定义实现中

@NgModule({
  imports: [CommonModule, CmsParagraphModule],
  declarations: [YourParagraphComponent],
  exports: [YourParagraphComponent],
  providers: [provideConfig(paragraphCmsConfig),YourSafeHtmlPipe],
})
export class YourParagraphComponentModule {}

【讨论】：