configure rich text editor

[Ananya Juhi]

Hi 

Could you please tell me how to configure the rich text editor in my angular project?

And also could you please prepare a sample for a rich text editor inside syncfusion ejs-accordion ??

Thanks..

[Prince Oliver]

Hi Ananya, 

Thank you for contacting Syncfusion support. 

To configure the rich text editor in your angular project, kindly refer to the following Getting Started section in the UG documentation: https://ej2.syncfusion.com/angular/documentation/rich-text-editor/getting-started.html 

We have prepared a sample with RichTextEditor inside Accordion control. Please find the sample at the following location: https://stackblitz.com/edit/angular-u22cuc  

Please let us know if you require any further assistance on this. 

Regards, 

Prince 

[Ananya Juhi]

Hi,

Thanks for the example.

But, I am not able to give a space between sentences inside the rich text editor if present within the accordion.

If the rich text is placed outside the accordion then, the space bar works, but doesn't work if present inside the accordion.

Could you have a look into it?

Thanks.

[Karthikeyan Viswanathan]

Hi Ananya, 

  

We confirmed that the issue with “Space key prevented with in Accordion” is a defect and we have logged a defect report. The fix for this issue is estimated to be available by the next week .  

  

As a workaround, We suggest to render the RTE as Iframe by using iframeSettings property.  

  

Please refer the below code example:  

  

ejs-richtexteditor id='Default' [iframeSettings]='iframe' height='250px'[toolbarSettings]='tools'>  

public iframe: object = { enable: true };  

  

  

UG Documentation link: https://ej2.syncfusion.com/angular/documentation/rich-text-editor/iframe.html  

  

Sample link: https://stackblitz.com/edit/rte-sample 

Regards,  

Karthikeyan V.  

[Ananya Juhi]

Hi,

I have configured the RTE as u have directed, but I am facing some issues with it.

I am getting errors in the console as the below,

[DOM] Found 2 elements with non-unique id #Default_toolbar_BackgroundColor_Target: (More info: https://goo.gl/9p2vKq) 

<input id=​"Default_toolbar_BackgroundColor_Target" class=​"e-rte-backgroundcolor-element">​ 

<input id=​"Default_toolbar_BackgroundColor_Target" class=​"e-rte-backgroundcolor-element e-control e-colorpicker" tabindex=​"-1" spellcheck=​"false">​

[DOM] Found 2 elements with non-unique id #Default_toolbar_FontColor_Target: (More info: https://goo.gl/9p2vKq) 

<input id=​"Default_toolbar_FontColor_Target" class=​"e-rte-fontcolor-element">​ 

<input id=​"Default_toolbar_FontColor_Target" class=​"e-rte-fontcolor-element e-control e-colorpicker" tabindex=​"-1" spellcheck=​"false">​

I have configured in the following steps,

package.json : "@syncfusion/ej2-ng-richtexteditor": "^16.2.41"

module.ts :       import { RichTextEditorAllModule } from '@syncfusion/ej2-ng-richtexteditor';

                         import { AccordionAllModule } from '@syncfusion/ej2-ng-navigations';

component.html :  <ejs-accordion>

                    <e-accordionitems>

                        <e-accordionitem expanded='true' header='RichTextEditor'>

                            <ng-template #content>

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

                                    <ng-template #valueTemplate>

                                        The rich text editor component is WYSIWYG.

                                    </ng-template>

                                </ejs-richtexteditor>

                            </ng-template>

                        </e-accordionitem>

                    </e-accordionitems>

                </ejs-accordion>

component. ts :      import { RichTextEditorComponent, ToolbarService } from '@syncfusion/ej2-ng-richtexteditor';

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

                              public tools: object = {

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

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

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

};

I have also pasted a screenshot of how my page looks with the RTE, please have a look and provide me some solutions.

Thanks.

[Karthikeyan Viswanathan]

Hi Ananya, 

Based on your shared screenshot and code, We suspect that the RichTextEditor rendered twice with same ID. So, Please use different ID for both RTE Control. 

Regards, 

Karthikeyan V. 

[Ananya Juhi]

Hi,

I have changed the rich text editor id, but i am still facing problems. I am unable to see any icons like bold, italic, font-color (you can see it in the screenshot).

I have attached a screenshot, please take a look at it and suggest me some solutions.

//my code//

module.ts :      import { RichTextEditorAllModule } from '@syncfusion/ej2-ng-richtexteditor';

component.html : <ejs-richtexteditor id='Default1' height='250px' [toolbarSettings]='tools' [(ngModel)]="editorVal">

                                    <ng-template #valueTemplate>

                                        The rich text editor component is WYSIWYG.

                                    </ng-template>

                                </ejs-richtexteditor>

component. ts :      import { RichTextEditorComponent, ToolbarService } from '@syncfusion/ej2-ng-richtexteditor';

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

                    

                              @Component({

                                                 selector: 'app-add-section',

                                                 templateUrl: './add-section.component.html',

                                                 styleUrls: ['./add-section.component.css'],

                                                 providers: [ToolbarService,

                                                                       LinkService, ImageService, MarkdownEditorService, 

                                                                       HtmlEditorService]

                              })

                              public tools: object = {

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

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

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

};

// attached screnshot //

[Karthikeyan Viswanathan]

Hi Ananya,  

 

Based on your shared screenshot and code, We suspect that the RichTextEditor rendered with older version of stylesheet files. So, Please use latest stylesheet files of RTE Control or the latest CDN link: https://cdn.syncfusion.com/ej2/material.css  

 

Regards,  

Karthikeyan V.  

[MIHIR DASH]

Hi,

Could you please tell if the 'spacebar' issue of RTE within the accordion is fixed ??

The temporary solution you provided

ejs-richtexteditor id='Default' [iframeSettings]='iframe' height='250px'[toolbarSettings]='tools'>  

public iframe: object = { enable: true };                                                                                          

  

is raising some error in the console. Can you please take a look at it?

The following is the said error,

core.js:1449 ERROR TypeError: Cannot read property 'body' of null

    at IframeContentRender.renderPanel (ej2-richtexteditor.es5.js:7828)

    at Render.render (ej2-richtexteditor.es5.js:8138)

    at RichTextEditorComponent.RichTextEditor.RTERender (ej2-richtexteditor.es5.js:10948)

    at RichTextEditorComponent.RichTextEditor.render (ej2-richtexteditor.es5.js:10521)

    at RichTextEditorComponent.Component.appendTo (ej2-base.es5.js:5152)

    at eval (ej2-ng-base.es5.js:361)

    at ZoneDelegate.invokeTask (zone.js:421)

    at Object.onInvokeTask (core.js:4751)

    at ZoneDelegate.invokeTask (zone.js:420)

    at Zone.runTask (zone.js:188)

[MIHIR DASH]

Hi,

I have two RTEs. One inside an accordion and another outside of the accordion.

The rich text that I have outside the accordion, is not working properly. Whenever I am selecting a text and clicking on the font color/ background color option in the toolbar,

the color palette is not showing.

I have attached a sample, please take a look into it.

https://stackblitz.com/edit/rte-sample-eaj8cd?file=src/app/app.component.html

Thanks..

[Karthikeyan Viswanathan]

Hi Mihir, 

We have validated your shared sample. Both the issue was raised due to using same ID for both RTE. And also the fix for the reported issue is estimated to be available by this week .   

Please refer the sample link: https://stackblitz.com/edit/rte-sample-2b3vw3  

Regards, 

Karthikeyan V. 

[Ananya Juhi]

Hi,

Could you please tell if the 'spacebar' issue of RTE within the accordion is fixed ??

The temporary solution you provided

ejs-richtexteditor id='Default' [iframeSettings]='iframe' height='250px'[toolbarSettings]='tools'>  

public iframe: object = { enable: true };                                                                                          

  

is raising some error in the console. Can you please take a look at it?

The following is the said error,

core.js:1449 ERROR TypeError: Cannot read property 'body' of null

    at IframeContentRender.renderPanel (ej2-richtexteditor.es5.js:7828)

    at Render.render (ej2-richtexteditor.es5.js:8138)

    at RichTextEditorComponent.RichTextEditor.RTERender (ej2-richtexteditor.es5.js:10948)

    at RichTextEditorComponent.RichTextEditor.render (ej2-richtexteditor.es5.js:10521)

    at RichTextEditorComponent.Component.appendTo (ej2-base.es5.js:5152)

    at eval (ej2-ng-base.es5.js:361)

    at ZoneDelegate.invokeTask (zone.js:421)

    at Object.onInvokeTask (core.js:4751)

    at ZoneDelegate.invokeTask (zone.js:420)

    at Zone.runTask (zone.js:188)

Also, please look into another issue mentioned below,

I have two RTEs. One inside an accordion and another outside of the accordion.

The rich text that I have outside the accordion, is not working properly. Whenever I am selecting a text and clicking on the font color/ background color option in the toolbar,

the color palette is not showing.

I have attached a sample, please take a look into it.

https://stackblitz.com/edit/rte-sample-eaj8cd?file=src/app/app.component.html

Thanks..

[Karthikeyan Viswanathan]

Hi Ananya,  

  

We have validated your shared sample. Both the issue is due to using of same ID for both RTE. Also, we have internally fixed the reported issue.  The fix will be available in Volume 2 SP1 release which will be available by the end of this week.  

  

Please refer to the sample link: https://stackblitz.com/edit/rte-sample-2b3vw3  

Regards,  

Karthikeyan V. 

[Ananya Juhi]

Hi,

I have changed my code as per your provided sample, but I am still facing the same issue.

Below is my code

//RTE outside accordion

<div class="" style="width:100%">

    <ejs-richtexteditor id='Default1' [toolbarSettings]='tools' [iframeSettings]='iframe' [(ngModel)]="clientViewText" placeholder="Insert text here.."></ejs-richtexteditor>

</div>

//RTE inside accordion

<ejs-accordion>

<e-accordionitems>

<e-accordionitem header='Settings'>

<ng-template #content>

<div class="row view-text-row">

<div class="col-md-11 col-sm-12 col-xs-12">

<label class="addClientLabel">Online View Text</label>

<!-- syncfusion rte -->

<ejs-richtexteditor id='Default2'[toolbarSettings]='tools' [iframeSettings]='iframe' [(ngModel)]="onlineViewText" placeholder="Insert text here.."></ejs-richtexteditor>

</div>

</div>

</ng-template>

</e-accordionitem

</e-accordionitems>

</ejs-accordion>

And when I am opening the accordion, This is the error coming in console,

core.js:1449 ERROR TypeError: Cannot read property 'body' of null

    at IframeContentRender.renderPanel (ej2-richtexteditor.es5.js:7828)

    at Render.render (ej2-richtexteditor.es5.js:8138)

    at RichTextEditorComponent.RichTextEditor.RTERender (ej2-richtexteditor.es5.js:10948)

    at RichTextEditorComponent.RichTextEditor.render (ej2-richtexteditor.es5.js:10521)

    at RichTextEditorComponent.Component.appendTo (ej2-base.es5.js:5152)

    at eval (ej2-ng-base.es5.js:361)

    at ZoneDelegate.invokeTask (zone.js:421)

    at Object.onInvokeTask (core.js:4751)

    at ZoneDelegate.invokeTask (zone.js:420)

    at Zone.runTask (zone.js:188)

And when I am closing my modal and opening it again, this the error coming in console,

core.js:1449 ERROR TypeError: Cannot read property 'editorManager' of null

    at RichTextEditorComponent.RichTextEditor.destroyDependentModules (ej2-richtexteditor.es5.js:10647)

    at RichTextEditorComponent.RichTextEditor.destroy (ej2-richtexteditor.es5.js:10617)

    at RichTextEditorComponent.ComponentBase.ngOnDestroy (ej2-ng-base.es5.js:240)

    at callProviderLifecycles (core.js:12754)

    at callElementProvidersLifecycles (core.js:12715)

    at callLifecycleHooksChildrenFirst (core.js:12698)

    at destroyView (core.js:14064)

    at callViewAction (core.js:14215)

    at execEmbeddedViewsAction (core.js:14153)

    at Object.destroyView (core.js:14062)

https://stackblitz.com/edit/rte-sample-nujtht?file=src%2Fapp%2Fapp.component.html

[Karthikeyan Viswanathan]

Hi Ananya,   

We confirmed that the issue with “Iframe body not loaded” is a defect and we have logged a defect report. The fix for this issue is estimated to be available our upcoming patch release.    

Regards,
Karthikeyan V.   

[Rebecca D]

Has a fix for this been provided, I'm experiencing the same issue in angular 9,  "@syncfusion/ej2-angular-richtexteditor": "^18.4.42"

[Revanth Krishnan]

Hi Rebecca, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “When rendering the Rich Text Editor with Iframe enable inside the Accordion console error occurs”. 

 

We tried all the feasible ways to reproduce the issue by rendering the Rich Text Editor with Iframe inside the Accordion. Also, we configured the specified version of angular and Rich Text Editor. But we are unable to reproduce the issue from our side. 

 

We have prepared a sample for your reference, 

Sample: https://stackblitz.com/edit/angular-k4g87r-4rntfc?file=app.component.ts 

 

We didn’t face this kind of issue with the Angular Rich Text Editor recently. The specified forum was logged 2 years ago. 

 

Can you please share us with the following details? 

• Code snippet of the Rich Text Editor which you used in your application.
• If possible, can you please share us with the issue reproducible sample or please modify the shared sample with issue reproducing steps.

The above details will be helpful to validate and reproduce the issue and assist you at the earliest. 

 

Regards, 

Revanth