Toolbar dont display correctly

[Alejo]

Hi!,

I am having a problem when I want to use RichTextEditor.

Could someone help me?

Thanks in advance!

Toolbar display:

html:

  <ejs-richtexteditor id='Default' height='250px' [toolbarSettings]='tools' [(ngModel)]="editorVal">

    <ng-template #valueTemplate>

      The rich text editor component is WYSIWYG.

    </ng-template>

  </ejs-richtexteditor>

Component

import { ToolbarService, HtmlEditorService } from '@syncfusion/ej2-angular-richtexteditor';

@Component({

  selector: 'msa-studios-edit',

  templateUrl: './edit.component.html',

  styleUrls: ['../../../commons/list.component.scss'],

  providers: [ToolbarService, HtmlEditorService]

})

export class StudiosEditComponent extends EditComponent {

  public editorVal

   public tools: object = {

          items: ['Bold', 'Italic', 'Underline', '|',

              'Undo', 'Redo', '|',

              'FontColor', 'BackgroundColor', '|']

        };

Module

import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor';

import { DialogModule } from '@syncfusion/ej2-angular-popups';

@NgModule({

  declarations: [

    StudiosListComponent,

    StudiosEditComponent,

    StudyEditReportComponent,

    VerifyClientComponent,

    VerifyStudyComponent,

    VerifyPatientComponent,

    CreateReportComponent,

    TranscriptComponent,

    ViewerReportComponent

  ],

  imports: [

    DialogModule,

    RichTextEditorAllModule,

Package:

  "@syncfusion/ej2-angular-richtexteditor": "^21.1.39",

"@angular/animations": "^14.2.12",

    "@angular/cdk": "^14.2.7",

    "@angular/common": "^14.2.12",

    "@angular/compiler": "^14.2.12",

    "@angular/core": "^14.2.12",

    "@angular/forms": "^14.2.12",

    "@angular/google-maps": "14.2.7",

    "@angular/localize": "^14.2.12",

    "@angular/platform-browser": "^14.2.12",

    "@angular/platform-browser-dynamic": "^14.2.12",

    "@angular/router": "^14.2.12",

[Vinothkumar Yuvaraj]

Hi Alejo,

We would recommend adding the following style in the styles.css file to your project to resolve the issue. Please refer to the attached sample and see the code snippet below:

@import '../node_modules/@syncfusion/ej2-base/styles/bootstrap5.css';

@import '../node_modules/@syncfusion/ej2-icons/styles/bootstrap5.css';

@import '../node_modules/@syncfusion/ej2-buttons/styles/bootstrap5.css';

@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/bootstrap5.css';

@import '../node_modules/@syncfusion/ej2-inputs/styles/bootstrap5.css';

@import '../node_modules/@syncfusion/ej2-lists/styles/bootstrap5.css';

@import '../node_modules/@syncfusion/ej2-navigations/styles/bootstrap5.css';

@import '../node_modules/@syncfusion/ej2-popups/styles/bootstrap5.css';

@import '../node_modules/@syncfusion/ej2-richtexteditor/styles/bootstrap5.css';

Documentation : https://ej2.syncfusion.com/angular/documentation/rich-text-editor/getting-started#adding-css-reference

Regards,

Vinothkumar

Attachment: RTE_b4b1757b.zip

[Alejo]

Thanks!, I try again changing file names and other things and it work.

[Vinothkumar Yuvaraj]

Hi Alejo,

You're welcome! We are glad to assist you.