Skip to content

Commit 759ee10

Browse files
Merge pull request #13 from abinayabalakrishnan-syncfusion/ReadmeUpdate
Documentation update for README
2 parents 7956c09 + 2706b5a commit 759ee10

1 file changed

Lines changed: 79 additions & 34 deletions

File tree

README.md

Lines changed: 79 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,82 @@
11
# How to Insert Images in the Syncfusion Angular RTE Using a File Manager
22

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
3235
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

Comments
 (0)