Search results


RichTextEditor allows to insert images from online sources as well as local computer where you want to insert the image in your content. For inserting the image to the RichTextEditor, the following list of options have been provided in the insertImageSettings.

Options Description
allowedTypes Specifies the extensions of the image types allowed to insert on bowering and passing the extensions with comma separators.

For example, pass allowedTypes as .jpg and .png.
display Sets the default display for an image when it is inserted into the RichTextEditor.

Possible options are: ‘inline’ and ‘block’.
width Sets the default width of the image when it is inserted in the RichTextEditor.
height Sets the default height of the image when it is inserted in the RichTextEditor.
saveUrl Provides URL to map the action result method to save the image.
path Specifies the location to store the image.

RichTextEditor features are segregated into individual feature-wise modules. To use image and link tool, inject image module using the RichTextEditor.Inject(image).

Upload options

Through the ‘browse’ option, select the image from the local machine and insert into the RichTextEditor content.

If the path field is not specified in the insertImageSettings, the image will be transferred into base 64 and blob url for the image will be created and the generated url will be set to the src property of img tag.

    <img src="blob:" >

In the following sample, the image has been loaded from the local machine and it will be saved in the given location.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App  from './App';

ReactDOM.render(<App />, document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">

    <title> Syncfusion React RichTextEditor </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
     <link href="//" rel="stylesheet" />
    <link href="//" rel="stylesheet" />
    <link href="//" rel="stylesheet" />
    <link href="//" rel="stylesheet" />
    <link href="//" rel="stylesheet" />
    <link href="//" rel="stylesheet" />
    <link href="//" rel="stylesheet" />
    <link href="//" rel="stylesheet" />
    <link href="//" rel="stylesheet" />
    <link href="//" rel="stylesheet" />
    <script src=""></script>
    <script src="systemjs.config.js"></script>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;

    <div id='sample' style="margin: 20px auto 0;">
        <div id='loader'>Loading....</div>

 * RichTextEditor - Image Sample
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import './App.css';
class App extends React.Component {
    constructor() {
        this.toolbarSettings = {
            items: ['Image']
    render() {
        return (<RichTextEditorComponent height={450} toolbarSettings={this.toolbarSettings}>
        <p>The RichTextEditor 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>
            <p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes</p>
            <p>Capable of handling markdown editing.</p>
            <p>Contains a modular library to load the necessary functionality on demand.</p>
            <p>Provides a fully customizable toolbar.</p>
            <p>Provides HTML view to edit the source directly for developers.</p>
            <p>Supports third-party library integration.</p>
            <p>Allows preview of modified content before saving it.</p>
            <p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p>
            <p>Contains undo/redo manager.</p>
            <p>Creates bulleted and numbered lists.</p>
        <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]}/>
export default App;

Image delete

To remove an image from the RichTextEditor content, select the image and click Remove tool from the quick toolbar. It will delete the image from the RTE content as well as from the service location if the saveUrl is given.

Once you select the image from the local machine, the URL for the image will be generate. From there, you can remove the image from the service location by clicking the cross icon.

RTE Image delete

Insert from web

To insert an image from the online source like Google, Ping, etc., you should enable the image tool on the editor’s toolbar. By default, the image tool opens a simple dialog which allows you to insert an image from online source.

RTE Image insert


Sets the default width and height of the image when it is inserted in the RichTextEditor using width and height of the insertImageSettings. Through the quick toolbar, change the width and height using Change Size option. Once you click, the Image Size dialog box will open as follows. In that, you can specify the width and height of the image in pixel.

RTE Image dimension

Caption and Alt Text

Image caption and alternative text can be specified for the inserted image in the RichTextEditor through the quick toolbar options such as, Image Caption and Alternative Text.

Through the Alternative Text option, set the alternative text for the image, when the image is not upload successfully into the RichTextEditor.

By clicking the Image Caption, the image will get wrapped in an image element with a caption. Then, you can type caption content inside the RichTextEditor.

Display position

Sets the default display for an image when it is inserted in the RichTextEditor using display field in insertImageSettings. It has two possible options: ‘inline’ and ‘block’.

let defaultRTE: RichTextEditor = new RichTextEditor({
    insertImageSettings: {
      display: 'inline'

The hyperlink itself can be an image in RichTextEditor. If the image given as hyperlink, the remove, edit, and open link will be added to the quick toolbar of image. For further details about link, see the link documentation.

RTE image with link


RichTextEditor has a built-in image inserting support. The resize points will be appearing on each corner of image when focus. So, users can resize the image using mouse points or thumb through the resize points easily. Also, the resize calculation will be done based on aspect ratio.

RTE image resize