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

Question

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

复制步骤：

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

最明显/最简单的解决方案是：

创建SafeHtmlPipe 杠杆 DomSanitizer
然后扩展 OOTB 段落组件
并在所需元素上使用管道（如其他 Whosebug 线程中所述：Angular2 innerHtml binding remove style attribute）

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

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

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

Answer 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 {}

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

SAP Spartacus - Inline styles in Paragraph component (SmartEdit)

css

hybris

angular

spartacus-storefront

smartedit