|
1 | 1 | # How to Insert Images in the Syncfusion Angular RTE Using a File Manager |
2 | 2 |
|
3 | | -A quick start Angular project that shows how to browse for and insert images into a Syncfusion Angular Rich Text Editor component using a file manager. |
4 | | - |
5 | | -Examples: https://ej2.syncfusion.com/angular/demos/#/material/rich-text-editor/file-browser |
6 | | - |
7 | | -Documentation: https://ej2.syncfusion.com/angular/documentation/rich-text-editor/file-browser/ |
8 | | - |
9 | | - |
10 | | -# Project pre-requisites |
11 | | - |
12 | | -Make sure that you have the compatible versions of TypeScript and Angular in your machine before starting to work on this project. |
13 | | - |
14 | | -Angular 4+ |
15 | | - |
16 | | -TypeScript 2.6+ |
17 | | - |
18 | | -# How to run this application? |
19 | | - |
20 | | -To run this application, you need to first clone the how-to-insert-images-in-the-angular-rte-using-a-file-browser repository and then navigate to its appropriate path where it has been in your system. |
21 | | - |
22 | | -To do so, open the command prompt and run the below commands one after the other. |
23 | | - |
24 | | -git clone richtexteditor-example |
25 | | - |
26 | | -cd richtexteditor-example |
27 | | - |
28 | | -# Installing |
29 | | - |
30 | | -Once done with downloading, next you need to install the necessary packages required to run this application locally. The npm install command will install all the needed angular packages into your current project and to do so, run the below command. |
31 | | - |
| 3 | +**Repository Description** |
| 4 | +This repository contains a **quick‑start Angular sample** that demonstrates how to **browse and insert images** into the Syncfusion **Angular Rich Text Editor (RTE)** using a **File Manager**. |
| 5 | + |
| 6 | +The sample illustrates integrating a file‑browsing experience with the Rich Text Editor, allowing users to select images from a file system and insert them directly into editor content. |
| 7 | + |
| 8 | +## Project Overview |
| 9 | +The purpose of this project is to help developers understand how to configure and use the Syncfusion Angular Rich Text Editor with a File Manager for image insertion. It provides a reference implementation for adding file‑browser support to a rich text editing workflow in an Angular application. |
| 10 | + |
| 11 | +## Features |
| 12 | +- Integration of **Syncfusion Angular Rich Text Editor** |
| 13 | +- Browse image files using a **File Manager** |
| 14 | +- Insert selected images into the editor content |
| 15 | +- Angular‑based quick start project |
| 16 | +- Live reload during development |
| 17 | + |
| 18 | +## Prerequisites |
| 19 | +Ensure the following requirements are met before running this project: |
| 20 | +- Angular **4+** |
| 21 | +- TypeScript **2.6+** |
| 22 | +- Node.js and npm |
| 23 | +- A supported modern web browser |
| 24 | + |
| 25 | +## Installation |
| 26 | + |
| 27 | +### Clone the Repository |
| 28 | +Clone the repository and navigate to the project directory: |
| 29 | +```bash |
| 30 | +git clone https://github.com/SyncfusionExamples/how-to-insert-images-in-the-angular-rte-using-a-file-manager.git |
| 31 | +``` |
| 32 | +### Install Dependencies |
| 33 | +Install the required Angular and Syncfusion packages: |
| 34 | +```bash |
32 | 35 | npm install |
33 | | - |
34 | | -# Running on development server |
35 | | - |
36 | | -Run ng serve command for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files. |
37 | | - |
| 36 | +``` |
| 37 | +### Running the Application |
| 38 | +Start the Angular development server using: |
| 39 | +```bash |
| 40 | +ng serve |
| 41 | +``` |
| 42 | +Navigate to the following URL in your browser: |
| 43 | +``` |
| 44 | +http://localhost:4200/ |
| 45 | +``` |
| 46 | +The application automatically reloads when you modify source files. |
| 47 | + |
| 48 | +## Usage |
| 49 | +Once the application is running: |
| 50 | +- Open the Syncfusion Angular Rich Text Editor. |
| 51 | +- Use the file browser integration to browse image files. |
| 52 | +- Select an image to insert it directly into the editor content. |
| 53 | +This setup provides a seamless image‑insertion experience within the Angular RTE. |
| 54 | + |
| 55 | +## Configuration |
| 56 | +The file browser configuration is handled through the Rich Text Editor’s file browser settings. You can customize: |
| 57 | +- File source paths |
| 58 | +- Accepted image formats |
| 59 | +- File Manager behavior for browsing and selection |
| 60 | + |
| 61 | +## Documentation |
| 62 | +- General Syncfusion documentation: |
| 63 | +https://help.syncfusion.com/ |
| 64 | +- Angular Introduction: |
| 65 | +https://ej2.syncfusion.com/angular/documentation/introduction |
| 66 | +- Angular File Manager – Getting Started: |
| 67 | +https://ej2.syncfusion.com/angular/documentation/file-manager/getting-started |
| 68 | + |
| 69 | +## Additional Resources |
| 70 | +- Rich Text Editor file browser demo: |
| 71 | +https://ej2.syncfusion.com/angular/demos/#/material/rich-text-editor/file-browser |
| 72 | +- Rich Text Editor file browser documentation: |
| 73 | +https://ej2.syncfusion.com/angular/documentation/rich-text-editor/file-browser/ |
| 74 | + |
| 75 | +## Troubleshooting |
| 76 | +- Ensure compatible Angular and TypeScript versions are used. |
| 77 | +- Re‑run npm install if dependencies fail to install. |
| 78 | +- Restart the development server if changes are not reflected. |
| 79 | +- Check browser console logs for runtime errors. |
| 80 | + |
| 81 | +## Support |
| 82 | +For detailed API references, file browser configuration guidance, and advanced Angular RTE scenarios, refer to the Syncfusion Angular documentation links provided above. |
0 commit comments