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

Question

我一直试图使用SmartEdit中段落组件中最简单的OOTB特性之一(来自Spartacus店面的some新安装)--在Rich中为某些文本添加颜色--但是组件似乎会净化HTML，从而删除我的样式。

复制步骤：

• 关于Spartacusv3.2.1安装，access SmartEdit
• 添加一个段落组件：

​

• 在富文本编辑器和保存中添加一些内联样式：

​

• 检查结果：

​

• 已经非常明显的是，角分量已经删除了内联样式，但只需确认：

​

显而易见的/最简单的解决办法是：

使用DomSanitizer

• then扩展OOTB段落component

• and使用所需元素上的管道(如其他StackOverflow线程：Angular2 innerHtml binding remove style attribute)

中所述)

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

如果这是预期的行为，这将意味着一些OOTB功能实际上不能使用没有一些编码，这是相当令人失望的。

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

Answer 1

是的，并不是所有的事情都是有效的。

正如您所描述的，您可以自己解决这个问题，将默认的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 {}