Allow file browser in richtext editor to insert video, audio and documents as a link into RichTextEditor

[Francisco Kwame Kadzi]

I need to allow users to upload any type of file as a link in richtexteditor using file browser. Users are able to upload files using the file browser. but when a file other than an image is selected, the insert button is disabled. How can I override this behavior.

[Kokila Poovendran]

Hi Francisco Kwame Kadzi,

Thank you for reaching out to us with your question about enabling file uploads as links in the Rich Text Editor.

To meet your requirement, we have prepared a sample demonstrating how to allow different file types, such as documents, audio, and video files, to be inserted as links. In this example, we customize the insertImageSettings property to enable support for additional file types.

Here is the code snippet for the implementation:

 

App.component.html

 

 <ejs-richtexteditor #toolsRTE id='alltoolRTE' 

        [insertImageSettings]="insertImageSettings"></ ejs-richtexteditor >

 

App.component.ts

 

 public insertImageSettings: ImageSettingsModel = {

    saveUrl: this.hostUrl + 'api/RichTextEditor/SaveFile',

    removeUrl: this.hostUrl + 'api/RichTextEditor/DeleteFile',

    path: this.hostUrl + 'RichTextEditor/',

    allowedTypes: ['.jpeg', '.jpg', '.png', '.txt'],

  };

 

By customizing the allowedTypes property, you can enable various file types to be inserted as links within the editor. In the sample, we have added support for text files as an example.

You can view the complete sample here: Wnzqcu (forked) - StackBlitz

For more details on available settings and configurations, please refer to our Angular RichTextEditor API documentation.

Let us know if you have any further questions or need additional assistance.

[Francisco Kwame Kadzi]

Hello Kokila Poovendran 

Thank you for the help. 
The insert button is now enabled for the specified file types. But the link does not get inserted upon clicking the insert button. Nothing happens. No error message nothing. Same issue with the sample you provided. 

Please help

[Kokila Poovendran]

Hi Francisco Kwame Kadzi

Thank you for your query, and we sincerely apologize for any inconvenience caused.

We have validated your request and would like to clarify that the File Browser feature in the Rich Text Editor is specifically designed for handling image uploads. It is intended to load images from cloud services and insert them into the editor.

Currently, uploading and inserting non-image files (such as PDFs, documents, or other file types) directly as links via the File Browser is not supported. The insertImageSettings property, including its allowedTypes option, applies only to image file types and is used to restrict specific image formats during uploads.

For more details, you can refer to our documentation here:
File Browser in Angular Rich Text Editor Component | Syncfusion

If your requirement involves uploading and inserting audio or video files, we recommend using the toolbar configuration feature to insert these media types into the editor. You can find more details and examples below:

• Documentation for Audio: Audio in Angular Rich Text Editor Component | Syncfusion
• Documentation for Video: Video in Angular Rich Text Editor Component | Syncfusion
• Live Demo: Insert Media in Angular Rich Text Editor | Syncfusion

We hope this helps. Please let us know if you have any further questions or require additional assistance.

[Kokila Poovendran]

Hi Francisco Kwame Kadzi,

Apologize for the inconvenience, please find the links below,

• Documentation for Audio: Audio in Angular Rich text editor component | Syncfusion
• Documentation for Video: Video in Angular Rich text editor component | Syncfusion
• Live Demo: Insert Media in Angular Rich Text Editor | Syncfusion

[Francisco Kwame Kadzi]

Hello Kokila Poovendran. 

I have been able to find my way around it. I am now able to insert any kind of file into the Rich Text Editor using the File browser. 

The issue I am facing now is with the search input and the input field for the rename popup. They are both disabled, I cannot type into the name field to rename a file nor type into the search field. 

[Yaswin Vikhaash Rajaretenam]

Hi Francisco Kwame Kadzi,

We have reviewed your query. To assist you better, could you please provide the following details?

• A code snippet showing how you have rendered the File Manager within the Rich Text Editor.
• An issue-replicating video demonstrating the problem.
• A sample where you have integrated the File Manager to insert files into the Rich Text Editor within the provided StackBlitz sample.

These details will help us validate the issue effectively and gain a clearer understanding of your requirements.

sample - Na1pccmj (forked) - StackBlitz

Regards,

Yaswin Vikhaash