change text in pop up

[JamesAdams]

hi,

it's possible to chance the text in this pop up ? (Insert Hyperlink)

[Indrajith Srinivasan]

Hi James, 

Greetings from Syncfusion support 

Yes, you can customize the popup text using the locale property in RichTextEditor. We have also prepared a sample for your requirement. 

  

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

Sample: https://stackblitz.com/edit/angular-l4tukn-9mrqit?file=app.component.ts

Can you please try out the above solution and let us know whether it meets your requirement.

Regards, 

Indrajith 

[JamesAdams]

Hi !

thanks but i have to use variables for the text...

L10n.load({

  'fr-FR': {

    'richtexteditor': {

      bold: this.translate.instant('MARKDOWN.BOLD'),

[Revanth Krishnan]

Hi James, 

 

We have validated your query `To customize the popup text using a variable in the locale property in RichTextEditor` and provided the sample and code snippet for the same. In your scenario, the variables “this.translate.instant('MARKDOWN.BOLD')” must return some string value to work properly in the locale property. 

 

Code Snippet: 

 

this.customBoldText = 'Custom bold text stored in variable'; 

this.customItalicText = 'Custom italic text stored in variable'; 

this.customUnderlineText = 'Custom underline text stored in variable'; 

this.customLinkText = 'Custom link text stored in variable'; 

 

L10n.load({ 

  'en-US': { 

    'richtexteditor': { 

      bold: this.customBoldText, 

      italic: this.customItalicText, 

      underline: this.customUnderlineText, 

      createLink: this.customLinkText 

    } 

  } 

}); 

 

Please find the sample from the below location, 

https://stackblitz.com/edit/angular-l4tukn-285w52 

 

Could you please try-out the above sample and code snippet and confirm whether it meets your requirement? If the above-shared sample doesn’t meet your requirements, kindly share with us more details regarding your requirement to provide an appropriate solution at the earliest. 

 

Thanks, 

Revanth G K 

[JamesAdams]

Hi,

it doesn't work for me because i use translate.instant ("'')

and translate.instant("")

is declared in the constructor: constructor(private translate: TranslateService){}

so i can't use it outside my class

[JamesAdams]

and it's not work for me

"Error: Uncaught (in promise): TypeError: Cannot set property 'customBoldText' of undefined

TypeError: Cannot set property 'customBoldText' of undefined

[JamesAdams]

it's possible to have this ?

<ejs-richtexteditor #toolsRTE [toolbarSettings]='tools' locale = "{'richtexteditor': {bold: 'test'}}">

</ejs-richtexteditor>

[JamesAdams]

I test that but it's not work

  public bold: object =  {

    tooltipText: this.translate.instant("MARKDOWN.BOLD"),

    template:

    '<button class="e-tbar-btn e-control e-btn e-lib e-icon-btn" type="button" id="mdDefault_toolbar_Bold" aria-label="Bold" tabindex="-1" style="width: auto;">' +

    '<span class="e-btn-icon e-bold e-icons"></span></button>'

  }

[JamesAdams]

I test that:

 public test: IToolsItemConfigs = {

    tooltip: "test",

    value: "test"

  }

    itemConfigs:{bold: this.test},

[JamesAdams]

It's possible to edit paragraph ?

i would like edit the name ant remove some option...

[Indrajith Srinivasan]

Hi James, 

  

Currently, we validating the reported scenario, will update further details shortly.  

  

Regards,
Indrajith 

[Indrajith Srinivasan]

Hi James, 

 

Query 1: usage of translate.instant("") 

 

We couldn't conclude your requirement with the provided details, can you please share further details on this. In case of loading the custom text you can use the L10 load or local variables as mentioned before. 

 

Query 2:  it's possible to have this ? 

 

<ejs-richtexteditor #toolsRTE [toolbarSettings]='tools' locale = "{'richtexteditor': {bold: 'test'}}"> 

</ejs-richtexteditor> 

 

No, this is not possible with locale property.

Query 3: It's possible to edit paragraph ?

Yes, you can edit the name and remove the default formats using the Format property in RichTextEditor. Also you can apply desired styles to the formats using the CssClass property.

API: https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor#format

Sample: https://stackblitz.com/edit/angular-l4tukn-7q3pkb?file=app.component.ts 

 

Can you please try out the above solution and let us know if you face any issues.

Regards, 

Indrajith 

[sai revanth]

Hi Team,
can you guys please help me with creating a link for a text on a pop-up window.

[Vinitha Devi Murugan]

Hi Sai, 

  

Thanks for your update. 

  

We have achieved your requirement “can you guys please help me with creating a link for a text on a pop-up window.” by making use of popupOpen event of our scheduler with the below code and CSS. You can refer the sample from the following link. 

  

Sample: https://stackblitz.com/edit/angular-event-popup-customization?file=app.component.ts  

  

 public onPopupOpen(args): void { 

    if ( args.type === 'QuickInfo' && args.target.classList.contains('e-appointment')) { 

      var div = document.createElement('Button'); 

      div.classList.add('e-subject-btn'); 

      let data = args.data; 

      div.innerHTML = args.data.Subject; 

      div.addEventListener('click', function (event) { 

        alert('Reason: ' + data.Reason); 

      }); 

      args.element.querySelector('.e-event-popup .e-subject-wrap').append(div); 

    } 

  } 

  

.e-subject-btn { 

  background-color: transparent; 

  border-color: transparent; 

  box-shadow: none; 

  cursor: default; 

  font-size: 20px; 

  font-weight: 500; 

  line-height: 1.5; 

  max-height: 87px; 

  color: #fff; 

} 

  

.e-quick-popup-wrapper .e-event-popup .e-popup-header .e-subject-wrap .e-subject { 

  display: none; 

} 

  

Kindly try with the above sample and get back to us if you need any further assistance. 

  

Regards, 

Vinitha 

[sai revanth]

Thank you  Vinitha Devi Murugan

[Vengatesh Maniraj]

Hi Sai, 

You are most welcome. 

Please get back to us if you need any further assistance. 

Regards, 

Vengatesh  

[sai revanth]

Hi Vinitha Devi Murugan and Vengatesh maniraj,
hope you guys doing great,

i am trying to create a pop-up on a pop-up tab PFA screenshot.....
while i click "click here" its opening in the bottom the way it looks in picture but i want it as a pop-up 

can you guys please help  me with that

[Satheesh Kumar Balasubramanian]

Hi Sai, 

  

Thanks for your update. 

  

We have validated your reported query "while i click "click here" its opening in the bottom the way it looks in picture but i want it as a pop-up" and prepared sample to open new popup on bottom when clicking on the specified Quick Popup element. 

  

Sample: https://stackblitz.com/edit/angular-event-popup-customization-ecoip5?file=app.component.ts 

  

app.component.html:   

<div class="control-section"> 

  <ejs-schedule 

    width="100%" 

    height="500px" 

    [selectedDate]="selectedDate" 

    [eventSettings]="eventSettings" 

    [(currentView)]="currentView" 

    (popupOpen)="onPopupOpen($event)" 

  > 

  </ejs-schedule> 

  <!-- Render the alert Dialog --> 

  <div class="dialog-section"> 

    <ejs-dialog 

      #alertDialog 

      id="dialog" 

      [buttons]="alertDlgButtons" 

      [visible]="hidden" 

      [header]="alertHeader" 

      [animationSettings]="animationSettings" 

      [content]="alertContent" 

      [showCloseIcon]="showCloseIcon" 

      [target]="target" 

      [width]="alertWidth" 

    > 

    </ejs-dialog> 

  </div> 

</div> 

  

app.component.ts:   

  public onPopupOpen(args): void { 

    if ( 

      args.type === 'QuickInfo' && 

      args.target.classList.contains('e-appointment') 

    ) { 

      var div = document.createElement('Button'); 

      div.classList.add('e-subject-btn'); 

      this.appointmentData = args.data; 

      div.innerHTML = args.data.Subject; 

      div.addEventListener('click', this.customClick.bind(this)); 

      args.element.querySelector('.e-event-popup .e-subject-wrap').append(div); 

    } 

  } 

  public customClick(args) { 

    this.alertDialog.content = this.appointmentData.Reason; 

    this.alertDialog.show(); 

    this.appointmentData = null; 

  } 

  

app.component.css:   

#dialog { 

  top: 510px !important; 

} 

  

Could you please check the above sample and confirm whether the above sample is similar to your requirement? 

  

Regards, 

Satheesh Kumar B