How to Integrate Syncfusion React Mention Component with Rich Text Editor
Tags: react, webdev
Published: 2022-11-01 13:31:06

---
title: How to Integrate Syncfusion React Mention Component with Rich Text Editor
published: true
date: 2022-11-01 11:24:24 UTC
tags: react, webdev
canonical_url: https://www.syncfusion.com/blogs/post/integrate-react-mention-component-with-rich-text-editor.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fl9d3zsmi95x3vcqi7mp.png
---

The Syncfusion [React Rich Text Editor](https://www.syncfusion.com/react-components/react-wysiwyg-rich-text-editor "React WYSIWYG Rich Text Editor") (RTE) is a feature-rich WYSIWYG HTML editor. It is widely used to create blogs, forum posts, notes, support tickets (incidents), comment sections, messaging applications, and more. The control provides an efficient UI for a better editing experience on mobile devices. It has a variety of tools to edit and format rich content and return valid HTML markup or Markdown (MD) content. It allows users to insert images, links, tables, and lists with modular architectures.

From [2022 Volume 3](https://www.syncfusion.com/forums/177858/essential-studio-2022-volume-3-main-release-v20-3-0-47-is-available-for-download "Essential Studio 2022 Volume 3 Release") onward, the React Rich Text Editor allows users to easily integrate our new [React Mention](https://www.syncfusion.com/react-components/react-mention "React @Mention Component") component to display a suggestion list of items that users can select or tag. When the user types the **@** character in the editor, the suggestion list will appear, and the user can select or tag a value from it.

In this blog, we will see the procedure to integrate the React Mention component with the Rich Text Editor.

## Getting started

Before getting started, please refer to the documentation for the Syncfusion [React Rich Text Editor](https://ej2.syncfusion.com/react/documentation/rich-text-editor/getting-started/ "Getting started with React Rich Text Editor component") and [Mention](https://ej2.syncfusion.com/react/documentation/mention/getting-started/ "Getting started with React Mention component") components to familiarize yourself with them.

Then, follow these steps to integrate the React Mention component with the Rich Text Editor.

### 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 using the following command in the desired location.

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

Then, 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 packages.

The [npm](https://www.npmjs.com/~syncfusionorg "Syncfusion components in npm site") public registry lists all the currently available Essential JS 2 packages. Install the React **Rich Text Editor** and **Mention** components with the following commands.

```bash
npm install @syncfusion/ej2-react-richtexteditor –save-dev
npm install @syncfusion/ej2-react-dropdowns –save-dev
```

### Step 3: Add the CSS reference for the Syncfusion React Rich Text Editor and Mention components.

Now, add the following CSS files as references for the Syncfusion React Rich Text Editor and Mention components in the  **src/App.css** file. These files are available in the  **../node\_modules/@syncfusion**  package folder.

```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-popups/styles/bootstrap5.css';
@import '../node_modules/@syncfusion/ej2-react-richtexteditor/styles/bootstrap5.css';
@import "../node_modules/@syncfusion/ej2-react-dropdowns/styles/bootstrap5.css";
```

### Step 4: Add the Syncfusion React Rich Text Editor to your application.

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

```js
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import './App.css';
 
function App() {
 
 var actionBegineHandler = function(args){
  if (args.requestType === 'EnterAction') {
    args.cancel = true;
  }
 }
 return (
 <div className="App">
  <div className='control-section' id="rte">
   <div className='rte-control-section'>
    <RichTextEditorComponent id="mention_integration" placeholder="Type @ and tag the name" actionBegin={actionBegineHandler.bind(this)} >
     <p>Hello <span contentEditable={false} className='e-mention-chip'><a title="maria@gmail.com">@Maria</a></span></p>
     <p>Welcome to the mention integration with rich text editor demo. Type the <code>@</code> character and tag a user from the suggestion list. </p>
     <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]} />
    </RichTextEditorComponent>
   </div>
  </div>
 </div>
 );
}
 
export default App;
```

### Step 5: Integrate the React Mention component with the Rich Text Editor.

1.Add the React Mention component in the **src/App.js** file and set the Rich Text Editor’s editable element ( **“**** #{RichTextEditor component ID}\_integration\_rte-edit-view”)** to the Mention component’s [target](https://ej2.syncfusion.com/react/documentation/api/mention/#target "target property of React Mention component").
2.Now, place the following code in the **src/App.js**  file to integrate the Mention component with the Rich Text Editor. We are going to bind an employee data source to the Mention component. We use the [itemTemplate](https://ej2.syncfusion.com/react/documentation/api/mention/#itemtemplate "itemTemplate property of React Mention Component") property to customize the suggestion list items and the [displayTemplate](https://ej2.syncfusion.com/react/documentation/api/mention/#displaytemplate "displayTemplate property of React Mention Component") property to customize the selected value from the suggestion list.
```js
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import './App.css';
 
function App() {
 var data = [
  { Name: "Selma Rose", Status: "active", Eimg: "2", EmailId: "selma@gmail.com" },
  { Name: "Maria", Status: "active", Eimg: "1", EmailId: "maria@gmail.com" },
  { Name: "Russo Kay", Status: "busy", Eimg: "8", EmailId: "russo@gmail.com" },
  { Name: "Camden Kate", Status: "active", Eimg: "9", EmailId: "camden@gmail.com" },
  { Name: "Robert", Status: "busy", Eimg: "dp", EmailId: "robert@gmail.com" },
  { Name: "Garth", Status: "active", Eimg: "7", EmailId: "garth@gmail.com" },
  { Name: "Andrew James", Status: "away", Eimg: "pic04", EmailId: "noah@gmail.com" },
  { Name: "Olivia", Status: "busy", Eimg: "5", EmailId: "olivia@gmail.com" },
  { Name: "Sophia", Status: "away", Eimg: "6", EmailId: "sophia@gmail.com" },
  { Name: "Margaret", Status: "active", Eimg: "3", EmailId: "margaret@gmail.com" },
  { Name: "Ursula Ann", Status: "active", Eimg: "dp", EmailId: "ursula@gmail.com" },
  { Name: "Laura Grace", Status: "away", Eimg: "4", EmailId: "laura@gmail.com" },
  { Name: "Albert", Status: "active", Eimg: "pic03", EmailId: "albert@gmail.com" },
  { Name: "William", Status: "away", Eimg: "10", EmailId: "william@gmail.com" }
 ];
 var fieldsData = { text: 'Name' };
 
 var itemTemplate = function(data) {
  return (
   <table>
    <tbody>
     <tr>
      <td>
       <div id="mention-TemplateList">
        <img className="mentionEmpImage" src={"./images/" + data.Eimg +".png"} />
        <span className={"e-badge e-badge-success e-badge-overlap e-badge-dot e-badge-bottom"+ data.Status}></span>
       </div>
      </td>
      <td className="mentionNameList">
       <span className="person">{data.Name}</span>
       <span className="email">{data.EmailId}</span>
      </td>
     </tr>
    </tbody>
   </table>
  );
 }
 var displayTemplate= function(data) {
  return (
   <React.Fragment><a title={data.EmailId}>@{data.Name}</a></React.Fragment>
  );
 }
 var actionBegineHandler = function(args){
  if (args.requestType === 'EnterAction') {
   args.cancel = true;
  }
}
return (
 <div className="App">
  <div className='control-section' id="rte">
   <div className='rte-control-section'>
    <RichTextEditorComponent id="mention_integration" placeholder="Type @ and tag the name" actionBegin={actionBegineHandler.bind(this)} >
     <p>Hello <span contentEditable={false} className='e-mention-chip'><a title="maria@gmail.com">@Maria</a></span></p>
     <p>Welcome to the mention integration with rich text editor demo. Type the <code>@</code> character and tag a user from the suggestion list. </p>
     <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]} />
    </RichTextEditorComponent>
   </div>
  </div>
  <MentionComponent id="mentionEditor" target="#mention_integration_rte-edit-view" suggestionCount={8} showMentionChar={false} allowSpaces={true} dataSource={data} fields={fieldsData}
                    popupWidth="250px" popupHeight="200px" itemTemplate={itemTemplate} displayTemplate={displayTemplate.bind(this)}></MentionComponent>
 </div>
);
}
 
export default App;
```
3.Then, add the following styles in the  **src/App.css** file to customize the Mention suggestion list items and select a value from the suggestion list.
```js
#mention-TemplateList {
  position: relative;
  display: inline-block;
  padding: 2px;
}
.mentionNameList .person, .mentionNameList .email {
  display: block;
  line-height: 20px;
  text-indent: 5px;
}
.mentionNameList .person {
  font-size: 16px;
}
.mentionEmpImage {
  display: inline-block;
  width: 46px;
  height: 46px;
  padding: 3px;
  border-radius: 25px;
}
#mention-TemplateList .e-badge-success {
  left: 76%;
  bottom: 6px;
  top: auto;
}
#mention_integration_rte-edit-view_popup .e-dropdownbase .e-list-item {
  line-height: 8px;
}
#mention-TemplateList .e-badge-success {
  background-color: #4d841d;
  color: #fff;
}
#mention-TemplateList .e-badge-success.away {
  background-color: #fedd2d;
  color: #fff;
}
#mention-TemplateList .e-badge-success.busy {
  background-color: #de1a1a;
  color: #fff;
}
#mention-TemplateList .e-badge.e-badge-dot {
  height: 10px;
  width: 10px;
}
#mention_integration .e-mention-chip {
  cursor: pointer;
}
```

After executing the above code example, we will get output like the following GIF image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/React-Mention-Component-Integration-with-Rich-Text-Editor-Control-1.gif" alt="React Mention Component Integration with Rich Text Editor Control" style="width:100%">

  <figcaption>React Mention Component Integration with Rich Text Editor Control</figcaption>

</figure>

## GitHub reference

For more details, check out the React [Mention component integration with React Rich Text Editor component GitHub demo](https://github.com/SyncfusionExamples/react-rich-text-editor-with-mentions "Mention component integration with React Rich Text Editor GitHub demo").

## Conclusion

Thanks for reading! I hope now you have a clear idea of how to integrate the Syncfusion [React Mention](https://www.syncfusion.com/react-components/react-mention "React @Mention Component") component with the [Rich Text Editor](https://www.syncfusion.com/react-ui-components/react-wysiwyg-rich-text-editor "React WYSIWYG Rich Text Editor"). This support is available in the [2022 Volume 3](https://www.syncfusion.com/forums/177858/essential-studio-2022-volume-3-main-release-v20-3-0-47-is-available-for-download "Essential Studio 2022 Volume 3 Release") release. We look forward to hearing your thoughts on this integration in the comments section below.

Check out our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v20.3.0.47 "Syncfusion Release Notes") and [What’s New](https://www.syncfusion.com/products/whatsnew "Syncfusion What's New") pages to see the other updates in this Volume 3 release.

Also, you can reach 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

- [Syncfusion Essential Studio 2022 Volume 3 Is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2022-volume-3-is-here.aspx "Blog: Syncfusion Essential Studio 2022 Volume 3 Is Here!")
- [What’s New in 2022 Volume 3: Essential JS 2](https://www.syncfusion.com/blogs/post/whats-new-in-2022-volume-3-essential-js-2.aspx "Blog: What’s New in 2022 Volume 3: Essential JS 2")
- [Top 7 React Animation Libraries in 2022](https://www.syncfusion.com/blogs/post/top-7-react-animation-libraries-in-2022.aspx "Blog: Top 7 React Animation Libraries in 2022")
- [How to Use Syncfusion’s React Rich Text Editor with React Redux Form](https://www.syncfusion.com/blogs/post/how-to-use-syncfusions-react-rich-text-editor-with-react-redux-form.aspx "Blog: How to Use Syncfusion’s React Rich Text Editor with React Redux Form")