Create an Angular Rich Text Editor Using Angular CLI 

Hi, Your requirement to get the value of the RichTextEditor on a button click from the parent component can be achieved by using @ViewChild to access the child component in the parent component and then access the Editor's value through a method in the child component. Please check the code below, Code snippet: child.component.ts: import { Component, ViewChild } from '@angular/core'; import { ToolbarService, LinkService, ImageService, HtmlEditorService, RichTextEditorModule, QuickToolbarService, VideoService, AudioService, TableService, PasteCleanupService, } from '@syncfusion/ej2-angular-richtexteditor'; @Component({ selector: 'app-child', template: ` ` }) export class ChildComponent { @ViewChild('toolsRTE') public rteObj: RichTextEditorComponent; getValue(): string { return this.rteObj.value; } } parent.component.ts: import { Component, ViewChild } from '@angular/core'; import { ChildComponent } from './child.component'; @Component({ selector: 'app-parent', template: ` Get Value ` }) export class ParentComponent { @ViewChild(ChildComponent) childComponent: ChildComponent; getValue() { const textValue = this.childComponent.getValue(); console.log(textValue ); // You can do whatever you want with the textarea value here } }

Hi, You can change and predefine the font family items that populate in the font family dropdown list from the toolbar using the fontFamily property in RichTextEditor. Please check the code and documentation below for more information. Code snippet: export class AppComponent { public fontFamily: Object = { default: "Noto Sans", // to define default font-family items: [ {text: "Segoe UI", value: "Segoe UI", class: "e-segoe-ui", command: "Font", subCommand: "FontName"}, {text: "Noto Sans", value: "Noto Sans", command: "Font", subCommand: "FontName"}, {text: "Impact", value: "Impact,Charcoal,sans-serif", class: "e-impact", command: "Font", subCommand: "FontName"}, {text: "Tahoma", value: "Tahoma,Geneva,sans-serif", class: "e-tahoma", command: "Font", subCommand: "FontName"}, ] }; } Documentation: ej2.syncfusion.com/angular/documentation/rich-text-editor/how-to/change-default-font-family API Link: helpej2.syncfusion.com/angular/documentation/api/rich-text-editor/#fontfamily

Hello, We can look into this and get back to you but response times via our RU-vid videos are slower than our regular support. Have you opened a support ticket or tried our live chat? www.syncfusion.com/support/directtrac/incidents/newincident If you have a retail or flat license, you also have access to our support chat.

We were unable to replicate the problem. Please find the below sample for your reference. Sample: stackblitz.com/edit/angular-parent-to-child-communication-q6ruln Please find the below documentation for rendering the Rich Text Editor component. Documentation: ej2.syncfusion.com/angular/documentation/rich-text-editor/getting-started/#install-syncfusion-rich-text-editor-package

Hello Lakhan, We are glad that you have found it helpful.

Hi, The tools are still accessible, we do not block the tools in this case.

@@SyncfusionInc Hello, I would like to know how to get the images inserted in the text editor. I retrieve the images in the following format: blob:localhost:4200/0460552f-af6e-499f-9ca5-f3946b1a90d0 It does not allow me to display an image. How do you get the image?

Hi, We have analyzed your query. By default, images are saved as blob format in RichTextEditor. We have two upload options for images inserted into the Rich Text Editor. Blob format image: By default, images are saved as blob format in SfRichTextEditor. The blob format images are removed when save the images into database. So, you need to save the images in your application end and use the same images to save the database using SaveUrl and Path property of the RichTextEditorImageSettings property. The SaveUrl represents the URL to an action result method to save the image, and the Path represents the destination folder in which the image must be saved. app.component.ts public baseUrl: string = 'localhost:62869/'; public insertImageSettings: object = { saveUrl: this.baseUrl + 'api/richtexteditor/SaveFile', path: '' }; Sample: stackblitz.com/edit/angular-dcqqgd-vy3ai4?file=app.component.ts,app.component.html Server Side ASP.NET Core: Please find the attached sample Before running the angular sample, you need to run the server side application. Base64 format: Another way to achieve your requirement is by saving the image in base64 format by configuring saveFormat as "Base64" on the "insertImageSettings" property. You can use base64 for small sized images in RichTextEditor. If we upload large sized images, the browser will hang while loading the base64 string. If you want to upload large-sized images in the Rich Text Editor, you need to use the saveUrl and path properties in the InsertImageSettings API. Documentation: ej2.syncfusion.com/aspnetcore/documentation/rich-text-editor/image/#upload-options API links: help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorImageSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorImageSettings_Path

@@SyncfusionInc Hello and thank you for your answer. I code on Angular 2 1 answer I do have a Blob image: But as it is a file in memory I have to transform it to store it in base. How to transform this file ??? 2 answers So I tried the other method with [insertImageSettings]="insertImageSettings" and public insertImageSettings: ImageSettingsModel = { allowedTypes: ['.jpeg', '.jpg', '.png'], display: 'inline', width: 'auto', height: 'auto', //saveFormat: 'Blob', saveFormat: 'Base64', saveUrl: 'localhost:3000/file', removeUrl: 'localhost:3000/file', path: '', } Using a json-server API (github.com/typicode/json-server) the sending is done well but in the API I have no object, just Id's that are incremented. Overall I can not control the images I send to my API. Can help me the example you gave me I already know in Angular Translated with www.DeepL.com/Translator (free version)

@@SyncfusionInc Hello, I want to send my images to a Spring boot API: @PostMapping("/saveImages") public ResponseEntity saveImage(@RequestParam(value = "images", required = false) MultipartFile images) throws IOException {} But the parameters in the following Angular are insufficient: public baseUrl: string = 'localhost:8077/'; public insertImageSettings: object = { saveUrl: this.baseUrl + `MSARTICLE/article/saveImages`, path: 'images', }; In the html party I have tried the following parameters: I absolutely need to be able to enter the Spring variable parameters so that I can retrieve the images. In the documentation and the examples I can't find any information on how to do it. Please tell me where I can reference this variable, thanks. Translated with www.DeepL.com/Translator (free version)

Hello deepak shrestha, Our paid and free versions both have the same features and support. You can check here to see if you qualify for our Community (free) license. It's available for companies with 5 or fewer developers and less than $1 Mil USD in annual revenue. bit.ly/395t17c

Hi, We have validated your query. Currently, the RichTextEditor component does not have support for selecting and attaching files. However, we have considered this requirement as a feature request. Now you can track the status of the feature in the below feedback link. Feedback: syncfusion.pulse.ly/x1ffoa9uwu The above feature will be implemented in any one of the future volume releases. Generally, we will plan the feature implementation based on the customer request count, feature rank, and wishlist plan. You can upvote the feature request feedback so that it gets support and will be ranked higher for implementation. We have made a workaround solution to solve this requirement until then. In the sample, we have used a custom toolbar button with RichTextEditor to upload Word or pdf documents by using File Manager control and to insert the selected files as a link. Please find the below sample for your reference. Stackblitz-sample: stackblitz.pulse.ly/f7doptf6gv