Problem with Rich Text Editor

[Dejo]

Hi.

I have implemented Rich Text Editor in my Angular app.

And when refresh app rich text editor looks like this on image below.

Sometimes this editor shows like it should be but sometimes is like this on previous image.

How to fix this problem ?

[Revanth Krishnan]

Hi Dejo, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “When refreshing the application the Rich Text Editor’s toolbar height is not proper sometimes”. 

 

 

We tried to reproduce the issue from our end by rendering the Rich Text Editor with the same content, but we couldn’t reproduce the issue. 

We suspect that the issue occurred because the toolbar height is not properly calculated when the Rich Text Editor is rendered. This can be resolved by using the ‘refreshUI’ public method in the ‘created’ event of the Rich Text Editor. We have prepared a sample for your reference, 

 

Code Snippet: 

 

<ejs-richtexteditor#defaultRTE id="defaultRTE" (created)="onRTECreate($event)"> 

  <ng-template #valueTemplate> 

    <p>RTE content</p> 

  </ng-template> 

</ejs-richtexteditor> 

 

public onRTECreate(e: any): void { 

  this.rteObj.refreshUI(); 

} 

 

Sample: https://stackblitz.com/edit/angular-jcqagy-32nhaz?file=app.component.ts 

 

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

 

If the issue still occurs, can be please share us with the following details, 

• The code snippet of the Rich Text Editor rendered in the application.
• If possible please share us with the issue reproducible sample or please modify the shared sample with the issue reproducing steps.

 

The above details will be helpful for us to validate and reproduce the issue from our end and assist you at the earliest. 

 

Regards, 

Revanth 

[Dejo]

Hi.

When I try to add (created)="onRTECreate($event)", then this error happens "Cannot invoke an object which is possibly 'undefined'".

In my module I only import RichTextEditorModule and in main CSS file I import all others CSS files for this component.

Am I missing something?

[Revanth Krishnan]

Hi Dejo, 

 

 

Good day to you. 

 

 

We have validated your query and we couldn’t reproduce the issue from our end. We suspect that the issue may have occurred due to the Rich Text Editor’s reference was not created in the application. Please create the reference for the Rich Text Editor and then using the ‘refreshUI’ method will resolve the issue. We have prepared a sample for your reference, 

 

Code Snippet: 

 

<ejs-richtexteditor #defaultRTE id="defaultRTE" (created)="onRTECreate($event)">  

  <ng-template #valueTemplate>  

    <p>RTE content</p>  

  </ng-template>  

</ejs-richtexteditor>  

 

export class AppComponent { 

    @ViewChild("defaultRTE") 

    public rteObj; 

   

    public onRTECreate(e: any): void { 

      this.rteObj.refreshUI(); 

    } 

} 

 

Sample: https://stackblitz.com/edit/angular-jcqagy-32nhaz?file=app.component.ts 

 

If the issue still occurs, can you please share us with the following details,  

• The code snippet of the Rich Text Editor rendered in the application.
• If possible please share us with the issue reproducible sample or please modify the shared sample with the issue reproducing steps.

 

The above details will be helpful for us to validate and reproduce the issue from our end and assist you at the earliest. 

 

Regards, 

Revanth 

[pratik bisoyi]

Hi

When I am trying to go to next line in RTE by clicking enter,it's taking space and stays in similar line .

Am I missing something?

[Gokulraj Devarajan]

Hi Pratik,

We have tried replicating the issue you have reported and found it is not replicated. Could you please provide a replicating sample?

Regards

Gokulraj Devarajan

[Manasa Reddy]

Hi
I have added RichtextEditor in my angular project. I am not able to see Toolbar even after making all the necessary changes. Please see the below code.

Package.json

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

.html

<div class="row">

<ejs-richtexteditor id='iframeRTE' [toolbarSettings]='tools' [iframeSettings]='iframe' [height]='height'>

<ng-template #valueTemplate>

<p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor

that provides the best user experience to create and update the content.

Users can format their content using standard toolbar commands.p>

<p><b>Key features:b>p>

<ul><li><p>Provides <IFRAME> and <DIV> modesp>li>

<li><p>Capable of handling markdown editing.p>li>

<li><p>Contains a modular library to load the necessary functionality on demand.p>li>

<li><p>Provides a fully customizable toolbar.p>li>

<li><p>Provides HTML view to edit the source directly for developers.p>li>

<li><p>Supports third-party library integration.p>li>

<li><p>Allows preview of modified content before saving it.p>li>

<li><p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.p>li>

<li><p>Contains undo/redo manager.p>li>

<li><p>Creates bulleted and numbered lists.p>li>

ul>

ng-template>

ejs-richtexteditor>

.ts

@Component({

selector: 'doceditorPoc',

templateUrl: './doc-editor-poc.component.html',

styleUrls: ['./doc-editor-poc.component.less'],

providers: [ToolbarService, LinkService, ImageService, HtmlEditorService]

})

export class DocEditorPOCComponent implements OnInit {

constructor(public devTestingService: DevTestingService) { }

pages:any;

@ViewChild("defaultRTE")

public rteObj;

public onRTECreate(e: any): void {

this.rteObj.refreshUI();

}

public tools: object = {

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

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

'FontName', 'FontSize', 'FontColor', 'BackgroundColor', '|',

'SubScript', 'SuperScript', '|',

'LowerCase', 'UpperCase', '|',

'Formats', 'Alignments', '|', 'OrderedList', 'UnorderedList', '|',

'Indent', 'Outdent', '|', 'CreateLink',

'Image', '|', 'ClearFormat', 'Print', 'SourceCode', '|', 'FullScreen']

};

public iframe: object = { enable: true };

public height: number = 5000;

}

[Vinitha Jeyakumar]

Hi Manasa Reddy,

We have tried to replicate the reported issue at our end using the code snippets you have provided. But unfortunately, we couldn't reproduce the issue. We have also prepared a sample for your reference.

Sample: https://stackblitz.com/edit/angular-5n2nsi?file=src%2Fmain.ts,src%2Fapp.component.html,src%2Fapp.component.ts

Can you please share the details below for further validation,

• Are you using RichTextEditor control inside a Dialog, if so please share the details?
• Which theme are you using?
• Are you able to get the toolbar when resizing the browser windows?
• If possible, please share us with the simple issue replicating runnable sample.

Regards,

Vinitha

[Rodolfo A. Calvo Jaubert]

I am actually having the same problem.

If I add values inside the ng-template all good, however if I remove them I have the same problem. I single line.

[Vinitha Jeyakumar]

Hi Rodolfo A. Calvo Jaubert,

Can you please share us with the more details about your reported issue for our better understanding?

• Share the issue replicating entire code snippet.
• Share the exact issue replication steps along with video illustration.
• If possible, share us with the simple issue replicating runnable sample.

Regards,

Vinitha