Easily Integrate the React Image Editor into the Rich Text Editor
Tags: react, webdev, richtexteditor
Published: 2023-03-09 05:59:49

---
title: Easily Integrate the React Image Editor into the Rich Text Editor
published: true
date: 2023-03-08 12:19:41 UTC
tags: react, webdev, richtexteditor
canonical_url: https://www.syncfusion.com/blogs/post/integrate-react-image-editor-into-rich-text-editor.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ki198crcqzgu6rx4riz4.png
---
In this blog, we‘ll see how to integrate the Syncfusion React Image Editor with the Rich Text Editor component.

Syncfusion’s [React Rich Text Editor](https://www.syncfusion.com/react-components/react-wysiwyg-rich-text-editor "Syncfusion React Rich Text Editor") is a feature-rich WYSIWYG HTML and Markdown editor. It is widely used to create blogs, forum posts, note sections, support tickets, messaging applications, and more. It allows users to insert images, links, tables, and lists with modular architectures.

The [React Image Editor](https://www.syncfusion.com/react-components/react-image-editor "Syncfusion React Image Editor Component") is a UI component for editing and enhancing images, with built-in support for cropping, rotating, flipping, zooming, and filtering. You can annotate images with shapes such as rectangles, ellipses, lines, and text, as well as freehand drawings.

## Getting started

Let’s create a React application and configure the Syncfusion React components in it.

### Step 1:  Create a new React application.

First, install the [create-react-app](https://www.npmjs.com/package/create-react-app "create-react-app NPM Package") npm package in the desired location using the following command.

```
npx create-react-app my-app
```

**Note:** Refer to the [Getting Started with React Apps](https://create-react-app.dev/docs/getting-started/ "Getting Started with React Apps") documentation to create a React app using the npm and yarn commands.

### Step 2: Add the Syncfusion NPM packages.

The [NPM](https://www.npmjs.com/~syncfusionorg "Syncfusion packages on NPM") public registry contains all the Syncfusion Essential JS 2 packages that are currently available. In this application, we’ll use the React Rich Text Editor, Image Editor, and Dialog (to hold the Image Editor) components.

Use the following commands to install the NuGet packages of these components.

```
npm install @syncfusion/ej2-react-richtexteditor –save-dev
npm install @syncfusion/ej2-react-image-editor –save-dev
npm install @syncfusion/ej2-react-popups –save-dev	 

```

### Step 3: Add the CSS references for the Syncfusion React components.

After the NuGet package installation, the following CSS files for the Syncfusion React components will be available in the **../node modules/@syncfusion** package folder. Add them as references in the **src/App.css** file.

```js
@import '../node_modules/@syncfusion/ej2-base/styles/bootstrap5.css';
@import '../node_modules/@syncfusion/ej2-icons/styles/bootstrap5.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/bootstrap5.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/bootstrap5.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/bootstrap5.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/bootstrap5.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/bootstrap5.css';
@import '../node_modules/@syncfusion/ej2-react-popups/styles/bootstrap5.css';
@import '../node_modules/@syncfusion/ej2-react-richtexteditor/styles/bootstrap5.css';
@import '../node_modules/@syncfusion/ej2-react-image-editor/styles/bootstrap5.css';

```

**Note:** For more details, refer to the getting started documentation for the React [Rich Text Editor](https://ej2.syncfusion.com/react/documentation/rich-text-editor/getting-started/ "Getting Started with Syncfusion Rich Text Editor Component"), [ImageEditor](https://ej2.syncfusion.com/react/documentation/image-editor/getting-started/ "Getting Started with Syncfusion React Image Editor Component"), and [Dialog](https://ej2.syncfusion.com/react/documentation/dialog/getting-started/ "Getting Started with Syncfusion React Dialog Component") components.

### Step 4: Add the React Rich Text Editor to the app.

Now, add the following code in the **src/App.js** file to add the Syncfusion React Rich Text Editor component and inject the required services.

```js
import './App.css';
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

function App() {
  var rteObj;
  return (
    <div>
      <RichTextEditorComponent
        id="rteImageEditor"
        ref={(scope) => {
          rteObj = scope;
        }}>
        <p>
          Integrating an image editor with a React Rich Text Editor can be achieved using a library such as React-Image-Editor.
          <img
            id="img1"
            style={{ height: 335 }}
            src="https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png"
          ></img>
        </p>
        <p>
          This library provides an easy-to-use API that allows developers to quickly and easily add an image editor to their React Rich Text Editor. It provides a variety of features, including image cropping, resizing, rotation, and more. Additionally, it supports a wide range of image formats, including JPEG, PNG, and GIF. With the help of this library, developers can easily add an image editor to their React Rich Text Editor, allowing users to customize the images they include in their documents.
        </p>
        <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
      </RichTextEditorComponent>
    </div>
  );
}

export default App;
```

### Step 5: Add the Image Editor custom toolbar item in the image quick toolbar.

The image quick toolbar feature lets users quickly insert images into the Rich Text Editor. To add a custom Image Editor toolbar item to the image quick toolbar, you will need to do the following:

1. Configure the required options for the image quick toolbar, such as align and remove.
2. Include the Image Editor custom toolbar item in the [_quickToolbarSettings.image_](https://ej2.syncfusion.com/react/documentation/api/rich-text-editor/quickToolbarSettingsModel/#image "QuickToolbarSettingsModel API in React Rich Text Editor API component") property of the Rich Text Editor.

Refer to the following code example.

```js
Import ‘./App.css’;
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from ‘@syncfusion/ej2-react-richtexteditor’;
import * as React from ‘react’;
 
function App() {
  var rteObj;
  const quickToolbarSettings = {
    image: [
      ‘Replace’,
      ‘Align’,
      ‘Caption’,
      ‘Remove’,      
      ‘-‘,
      ‘InsertLink’,
      ‘OpenImageLink’,
      ‘EditImageLink’,
      ‘RemoveImageLink’,
      ‘Display’,
      ‘AltText’,
      {
        tooltipText: ‘Image Editor’,
        template:
          ‘<button class=”e-tbar-btn e-btn” id=”imageEditor”><span class=”e-btn-icon e-icons e-rte-image-editor”></span>’,
      },
    ],
  };
 
  return (
    <div>
      <RichTextEditorComponent
        id=”rteImageEditor”
        ref={(scope) => {
          rteObj = scope;
        }}
        quickToolbarSettings={quickToolbarSettings}
        height={450}>
        <p>
          Integrating an image editor with a React Rich Text Editor can be achieved by using a library such as React-Image-Editor.
          <img
            id=”img1”
            style={{ height: 350 }}
           src=”https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png”
          ></img>
        </p>
        <p>This library provides an easy-to-use API that allows developers to quickly and easily add an image editor to their React Rich Text Editor. It provides a variety of features, including image cropping, resizing, rotation, and more. Additionally, it supports a wide range of image formats, including JPEG, PNG, and GIF. With the help of this library, developers can easily add an image editor to their React Rich Text Editor, allowing users to customize the images they include in their documents. </p>
        <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
      </RichTextEditorComponent>
    </div>
  );
}
 
export default App;
```

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/03/MicrosoftTeams-image-2.png" alt="Adding Custom Image Editor Item in the Image Quick Toolbar" style="width:100%">

  <figcaption>Adding Custom Image Editor Item in the Image Quick Toolbar</figcaption>

</figure>

### Step 6: Integrate the React Image Editor with the Rich Text Editor.

Next, add the following code into the  **src/App.js** file to integrate the React Image Editor with the Rich Text Editor component.

```js
Import ‘./App.css’;
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar, NodeSelection } from ‘@syncfusion/ej2-react-richtexteditor’;
import * as React from ‘react’;
import { DialogComponent } from ‘@syncfusion/ej2-react-popups’;
import { ImageEditorComponent } from ‘@syncfusion/ej2-react-image-editor’;
 
function App() {
  const dlgButtons = [
    {
      buttonModel: { content: ‘Insert’, isPrimary: true },
      click: onInsert.bind(this),
    },
    { buttonModel: { content: ‘Cancel’ }, click: onCancel },
  ];
 
  const selection = new NodeSelection();
  const header = ‘Image Editor’;
  var dialogObj;
  var imageEditorObj;
  var rteObj;
  var range;
  var saveSelection;
  var dataURL;
  var isLoaded = false;
  const quickToolbarSettings = {
    image: [
      ‘Replace’,
      ‘Align’,
      ‘Caption’,
      ‘Remove’,      
      ‘-‘,
      ‘InsertLink’,
      ‘OpenImageLink’,
      ‘EditImageLink’,
      ‘RemoveImageLink’,
      ‘Display’,
      ‘AltText’,
      {
        tooltipText: ‘Image Editor’,
        template:
          ‘<button class=”e-tbar-btn e-btn” id=”imageEditor”><span class=”e-btn-icon e-icons e-rte-image-editor”></span>’,
      },
    ],
  };
 
  function onInsert() {
    if (rteObj.formatter.getUndoRedoStack().length === 0) {
      rteObj.formatter.saveData();
    }
    saveSelection.restore();
    var canvas = document.createElement(
      ‘CANVAS’
    );
    var ctx = canvas.getContext(‘2d’);
    const imgData = imageEditorObj.getImageData();
    canvas.height =imgData.height;
    canvas.width = imgData.width;
    ctx.putImageData(imgData, 0,0);
    isLoaded = true;
    rteObj.executeCommand(“editImage”, { url: canvas.toDataURL(), width:{width: canvas.width}, height:{height:canvas.height}, selection: saveSelection });
    rteObj.formatter.saveData();
    rteObj.formatter.enableUndo(rteObj);
    dialogObj.hide();
  }
 
  function onCancel() {
    dialogObj.hide();
  }
  function onToolbarClick(args) {
    if (args.item.tooltipText === ‘Image Editor’) {
      range = selection.getRange(document);
      saveSelection = selection.save(range, document);
      dialogObj.show();
    }
  }
  function OnBeforeOpen() {
    var imageELement;
    var selectNodes = rteObj.formatter.editorManager.nodeSelection.getNodeCollection(range);
    if(selectNodes.length==1&& selectNodes[0].tagName==”IMG”)
    {
      imageELement = selectNodes[0];
      imageELement.crossOrigin = ‘anonymous’;
      var canvas = document.createElement(‘CANVAS’);
      var ctx = canvas.getContext(‘2d’);
      canvas.height = imageELement.offsetHeight;
      canvas.width = imageELement.offsetWidth;
      imageELement.onload = function () {
        ctx.drawImage(imageELement, 0, 0, canvas.width, canvas.height);
        dataURL = canvas.toDataURL();
        if (!isLoaded) {
          imageEditorObj.open(dataURL);
        }
      }
    }
  }
 
  return (
    <div>
      <RichTextEditorComponent
        id=”rteImageEditor”
        ref={(scope) => {
          rteObj = scope;
        }}
        quickToolbarSettings={quickToolbarSettings}
        toolbarClick= {onToolbarClick}>
        <p>
          Integrating an image editor with a React Rich Text Editor can be achieved by using a library such as React-Image-Editor.
          <img
            id=”img1”
            style={{ height: 335 }}
           src=”https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png”
          ></img>
        </p>
        <p>This library provides an easy-to-use API that allows developers to quickly and easily add an image editor to their React Rich Text Editor. It provides a variety of features, including image cropping, resizing, rotation, and more. Additionally, it supports a wide range of image formats, including JPEG, PNG, and GIF. With the help of this library, developers can easily add an image editor to their React Rich Text Editor, allowing users to customize the images they include in their documents.</p>
        <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
      </RichTextEditorComponent>
 
      <DialogComponent
        id=”ImageEditorDialog”
        ref={(scope) => {
          dialogObj = scope;
        }}
        buttons={dlgButtons}
        beforeOpen={OnBeforeOpen}
        header={header}
        visible={false}
        showCloseIcon={true}
        width=”800px”
        height=”800px”
        isModal={true}
      >
        <div className=”dialogContent”>
          <ImageEditorComponent
            height=”335px”
            ref={(scope) => {
              imageEditorObj = scope;
            }}
          />
        </div>
      </DialogComponent>
    </div>
  );
}
 
export default App;
```

Then, add the following styles in the **src/App.css** file for the Image Editor toolbar item icon.

```js
.e-rte-quick-popup .e-rte-quick-toolbar .e-rte-image-editor::before {
  content: “\e730”;
}
```

Select an image in the Rich Text Editor content; it will show the image quick toolbar. Select the **ImageEditor** button from the toolbar. A dialog will open with the image editing tools.

The Insert and Cancel buttons will be rendered at the bottom of the dialog. When we choose the **Insert** button, the edited image will be inserted into the Rich Text Editor content.

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/03/MicrosoftTeams-image-1.png" alt="Integrating the React Image Editor with the Rich Text Editor Component" style="width:100%">

  <figcaption>Integrating the React Image Editor with the Rich Text Editor Component</figcaption>

</figure>

## GitHub reference

Check out the complete code example for [integrating the React Image Editor with the Rich Text Editor on GitHub](https://github.com/SyncfusionExamples/react-image-editor-with-rich-text-editor "Integrating React Image Editor with Rich Text Editor GitHub demo").

## Conclusion

Thanks for reading! In this blog, we’ve seen how to integrate the Syncfusion [React Image Editor](https://www.syncfusion.com/react-components/react-image-editor "Syncfusion React Image Editor Component") with the [Rich Text Editor](https://www.syncfusion.com/react-ui-components/react-wysiwyg-rich-text-editor "Syncfusion Rich Text Editor Component") component. Try out the steps in this blog and provide your feedback in the comments section below!

If you are new to Syncfusion, try our controls’ features by downloading a [free trial](https://www.syncfusion.com/downloads "Free evaluation of Essential Studio"). You can also explore our [online demos](https://ej2.syncfusion.com/react/demos/#/material/rich-text-editor/tools "Syncfusion Rich Text Editor live demo") and [documentation](https://ej2.syncfusion.com/react/documentation/rich-text-editor/ "React Rich Text Editor documentation") to explore the other user-friendly features we support.

For questions, you can contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Easily Group Data into Ranges in Web Applications Using Pivot Table](https://www.syncfusion.com/blogs/post/easily-group-data-into-ranges-in-web-applications-using-pivot-table.aspx "Blog: Easily Group Data into Ranges in Web Applications Using Pivot Table")
- [Create a Redux Form with Syncfusion React Components](https://www.syncfusion.com/blogs/post/create-redux-form-with-syncfusion-react-components.aspx "Blog: Create a Redux Form with Syncfusion React Components")
- [Introducing the New React Image Editor](https://www.syncfusion.com/blogs/post/introducing-the-new-react-image-editor.aspx "Blog: Introducing the New React Image Editor")
- [Restrict Editing of Word Documents Based on User in a Web Application](https://www.syncfusion.com/blogs/post/restrict-editing-of-word-documents-based-on-user-in-a-web-application.aspx "Blog: Restrict Editing of Word Documents Based on User in a Web Application")