Using Classic Build, it doesn't apply styles in toolbar

[futbolsalas15]

When I use the Classic Build (using the basic example at https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/angular.html), it seems that doesn't apply the styles in the toolbar:

What is different from the example is that from the main module (app.module.ts) I'm creating a web component for each of the components of the project:

const element = createCustomElement(TestComponent, { injector: this._injector });
customElements.define('test-component', element);

Doesn't ckeditor5-angular have compatibility (specially the CSS) when is used in web components?

Thanks!

[Mgsy]

Hello, @futbolsalas15, could you give us more details about your environment? The content of your package.json and code of your component will be appreciated.

[futbolsalas15]

Hello @Mgsy, thanks for your prompt response!
I attached my package.json:

package.zip

The main module (app.module.ts) has the following code:

const BOOTSTRAP = environment.production ? [] : [AppComponent];

@NgModule({
  bootstrap: BOOTSTRAP,
  declarations: [AppComponent],
  imports: [BrowserModule, RichTextEditorModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule implements DoBootstrap {
  constructor(private readonly _injector: Injector) {
    this._registerWidgets();
  }

  public ngDoBootstrap(): void {}

  private _registerWidgets(): void {
    // here is where we register the angular componentes as web components, using createCustomElement method of Angular
    const element = createCustomElement(RichTextEditorComponent, { injector: this._injector });
    customElements.define('rich-text-editor', element);
  }
}

The component RichTextEditorComonent has the following code:

import { Component, Input, OnInit, ViewEncapsulation, Output, EventEmitter } from '@angular/core';
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';

@Component({
  templateUrl: './rich-text-editor.component.html',
  styleUrls: ['./rich-text-editor.component.scss'],
  encapsulation: ViewEncapsulation.ShadowDom
})
export class RichTextEditorComponent implements OnInit {
  @Input()
  public content: string;
  public editor = ClassicEditor;

  @Output()
  public contentChanged = new EventEmitter<string>();

  constructor() {}

  public ngOnInit(): void {
    this.content = 'Hello World!';
  }
}

The template:

<ckeditor
  [editor]="editor"
  [data]="content"
  [config]="{ toolbar: ['heading', '|', 'bold', 'italic'] }"
></ckeditor>

And in app.component.html, I use the previous component with the following code:

<rich-text-editor content="test"></rich-text-editor>

I don't know if it is enough. Thanks!.

[futbolsalas15]

I'm sorry, I missed the module config where I called CKEditorModule:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';

import { RichTextEditorComponent } from './containers/rich-text-editor.component';

  declarations: [RichTextEditorComponent],
  imports: [CommonModule, CKEditorModule],
  entryComponents: [RichTextEditorComponent]
})
export class RichTextEditorModule {}

Thanks!.

[futbolsalas15]

Hi @ma2ciek

When I included the CKEditorModule, the result is the same:

The basic actions works, but the styles of the toolbar aren't applied.

Sorry and thanks!

[ma2ciek]

Hi @futbolsalas15!

It looks like I did not understand you previously 😄

I'll check it. Looks like somehow the CKEditor 5 styles are not applied.

[futbolsalas15]

Hi @ma2ciek ,

I think I found the problem! Is the following line that I added as option to the @Component definition:

encapsulation: ViewEncapsulation.ShadowDom

I changed it to encapsulation: ViewEncapsulation.Emaulated and it works as expected. Reading the error is because ckeditor5 doesn't support Shadow DOM.

Thanks again for your help!

[ma2ciek]

Kudos for you for solving that issue. It's always good to know what can be a potential problem in the integration. 👍

The Shadow DOM is on our TODO list already: ckeditor/ckeditor5#1483.

[saravana-sk]

@ma2ciek @Reinmar
I am seeing this issue is closed, but I am still facing the same issue. May I know whether the ShadowDOM feature is implemented in CK Editor5 ??

[Witoso]

It's not, here's a related ticket: ckeditor/ckeditor5#3891, and a comment that it's also blocked on the browsers' side.