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

Question

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

复制步骤：

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

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

1. 创建一个SafeHtmlPipe以利用DomSanitizer
2. 然后扩展 OOTB 段落组件
3. 并在所需元素上使用管道（如另一个 StackOverflow 线程中所述：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 {}