How can I use locale on RichTextEditor

[Pedro Ivo Nogueirade Medeiros]

Hi I working in a brazilian company and  We have used RichTextEditor. How can I set (Pt) locale on Rich Text. I readed docs about it but not works. I did it: 

html:

<ejs-richtexteditor #notebookRTE [toolbarSettings]='tools' [insertImageSettings]='insertImageSettings'

[height]='height' [locale]="pt" [value]='notebook.richText' (imageUploading)="onuploading($event)"

(imageUploadSuccess)='onImageUploadSuccess($event, notebook)'

(actionComplete)='actionComplete($event)'>

</ejs-richtexteditor>

ts: 

export class AnnotationComponent implements OnInit {

@ViewChild('notebookRTE') rteEle: RichTextEditorComponent;

loading$: Observable<boolean>;

notebook$: Observable<Notebook>;

subthemeSelected$: Observable<any>;

currentSrc: any = '';

public tools: object = {

items: ['Undo', 'Redo', '|',

'Bold', 'Italic', 'Underline', 'StrikeThrough', '|',

'FontName', 'FontSize', '|',

'Alignments', '|',

'OrderedList', 'UnorderedList', '|',

'CreateLink', 'Image']

};

public height: number | string = 'calc(100vh - 260px)';

public locale: string = 'pt';

[Revanth Krishnan]

Hi Pedro, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “How can I use locale on the Rich Text Editor?” 

 

We have analyzed the shared code snippet and the locale can be used by first configuring the locale values of the ‘pt’ using the ‘L10n.load’ method and then configuring the ‘locale’ property as ‘pt’ in the Rich Text Editor. We have prepared a sample based on the shared code snippet for your reference, 

 

Code Snippet: 

 

<ejs-richtexteditor id="defaultRTE" [toolbarSettings]='tools' locale="pt"> 

</ejs-richtexteditor> 

 

import { L10n } from '@syncfusion/ej2-base'; 

 

//Configure the locale date here 

L10n.load({ 

  pt: { 

    richtexteditor: { 

      alignments: 'Alinhamentos', 

      justifyLeft: 'Alinhar à esquerda', 

      justifyCenter: 'Alinhar ao centro', 

      . . . 

    } 

  } 

}); 

 

import { Component } from '@angular/core'; 

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

@Component({ 

  selector: 'app-root', 

  templateUrl: 'app.component.html', 

  providers: [ToolbarService, LinkService, ImageService, HtmlEditorService] 

}) 

export class AppComponent { 

  public tools: ToolbarModule = { 

    items: [ 

      'Bold', 

      . . . 

      . . . 

    ] 

  }; 

} 

 

Sample: https://stackblitz.com/edit/angular-rzpz78-tjmfyx?file=app.component.ts 

 

Please check the below GitHub repository link for all the locale data of different cultures, 

Repo: https://github.com/syncfusion/ej2-locale/blob/master/src/pt.json 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/rich-text-editor/globalization/#localization 

 

Please check the above code snippet, sample, and documentation and let us know if it satisfies your requirement. 

 

Regards, 

Revanth 

[Pedro Ivo Nogueirade Medeiros]

Hello,

Thank you so much! Problem solved! I can't just  change the feedback message when a customer downloads something (for  example: "File uploaded successfully"), but the main problem solved. 

Best

Pedro Ivo

[Revanth Krishnan]

Hi Pedro, 

 

 

Good day to you. 

 

 

We have further validated your query “I can't just change the feedback message when a customer downloads something (for example: ‘File uploaded successfully’)” 

 

This can be resolved by adding the locale text content for the ‘uploadSuccessMessage’ in the uploader and then setting the culture using the ‘setCulture’ public method instead of using the locale property in the Rich Text Editor. We have modified the already shared sample for your reference, 

 

Code Snippet: 

 

import { L10n, setCulture } from '@syncfusion/ej2-base'; 

 

L10n.load({ 

  pt: { 

    uploader: { 

      uploadFailedMessage: 'Falha no upload do arquivo', 

      uploadSuccessMessage: 'Arquivo enviado com sucesso' 

    }, 

    richtexteditor: { 

      alignments: 'Alinhamentos', 

      justifyLeft: 'Alinhar à esquerda', 

      . . . 

    } 

  } 

}); 

 

setCulture('pt'); 

Note: When using the ‘setCulture’ public method the locale property does not need to be set in each component. 

 

Sample: https://stackblitz.com/edit/angular-rzpz78-wfcsk6?file=app.component.ts 

 

Please check the above code snippet and the sample and let us know if it resolves the issue. 

 

Regards, 

Revanth