Integrating Rich Text Editor in Tab Components

27 Feb 202524 minutes to read

Integrating a Rich Text Editor within Tab components provides a versatile and organized user interface for text formatting and content creation across multiple tabs. Each tab instance includes a dedicated editor instance configured with extensive toolbar options, enabling users to effortlessly manipulate text styles, apply formatting, insert media, and manage content layout.

[Class-component]

app.jsx

import {TabComponent,TabItemDirective,TabItemsDirective} from '@syncfusion/ej2-react-navigations';
import {HtmlEditor,Image,Inject,Link,QuickToolbar,RichTextEditorComponent,Toolbar,Table,PasteCleanup} from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.editorRef1 = React.createRef();
    this.editorRef2 = React.createRef();
    this.editorRef3 = React.createRef();
    this.headerText = [{ text: 'TAB 1' }, { text: 'TAB 2' }, { text: 'TAB 3' }];
    this.tools = {
      items: [
        'Bold',
        'Italic',
        'Underline',
        'StrikeThrough',
        'FontName',
        'FontSize',
        'FontColor',
        'BackgroundColor',
        'LowerCase',
        'UpperCase',
        '|',
        'Formats',
        'Alignments',
        'OrderedList',
        'UnorderedList',
        'Outdent',
        'Indent',
        '|',
        'CreateLink',
        'Image',
        '|',
        'ClearFormat',
        'Print',
        'SourceCode',
        'FullScreen',
        '|',
        'Undo',
        'Redo',
      ],
    };
  }

  content1 = () => {
    return (
      <div>
        <RichTextEditorComponent
          ref={this.editorRef1}
          toolbarSettings={this.tools}
        >
          <Inject
            services={[
              Toolbar,
              Link,
              Image,
              HtmlEditor,
              QuickToolbar,
              Table,
              PasteCleanup,
            ]}
          />
        </RichTextEditorComponent>
      </div>
    );
  };

  content2 = () => {
    return (
      <div>
        <RichTextEditorComponent
          ref={this.editorRef2}
          toolbarSettings={this.tools}
        >
          <Inject
            services={[
              Toolbar,
              Link,
              Image,
              HtmlEditor,
              QuickToolbar,
              Table,
              PasteCleanup,
            ]}
          />
        </RichTextEditorComponent>
      </div>
    );
  };

  content3 = () => {
    return (
      <div>
        <RichTextEditorComponent
          ref={this.editorRef3}
          toolbarSettings={this.tools}
        >
          <Inject
            services={[
              Toolbar,
              Link,
              Image,
              HtmlEditor,
              QuickToolbar,
              Table,
              PasteCleanup,
            ]}
          />
        </RichTextEditorComponent>
      </div>
    );
  };
    
    render() {
        return (<div>
            <TabComponent heightAdjustMode="Auto">
              <TabItemsDirective>
                <TabItemDirective
                  header={this.headerText[0]}
                  content={this.content1}
                />
                <TabItemDirective
                  header={this.headerText[1]}
                  content={this.content2}
                />
                <TabItemDirective
                  header={this.headerText[2]}
                  content={this.content3}
                />
              </TabItemsDirective>
        </TabComponent>
      </div>);
    }
}
export default App;

app.tsx

import {TabComponent,TabItemDirective,TabItemsDirective} from '@syncfusion/ej2-react-navigations';
import {HtmlEditor,Image,Inject,Link,QuickToolbar,RichTextEditorComponent,Toolbar,Table,PasteCleanup} from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

class App extends React.Component<{},{}> {
  private editorRef1: React.RefObject<RichTextEditorComponent>;
  private editorRef2: React.RefObject<RichTextEditorComponent>;
  private editorRef3: React.RefObject<RichTextEditorComponent>;
  private headerText: { text: string }[];
  private tools: { items: string[] };

  constructor(props: {}) {
    super(props);
    this.editorRef1 = React.createRef();
    this.editorRef2 = React.createRef();
    this.editorRef3 = React.createRef();
    this.headerText = [{ text: 'TAB 1' }, { text: 'TAB 2' }, { text: 'TAB 3' }];
    this.tools = {
      items: [
        'Bold', 'Italic', 'Underline', 'StrikeThrough',
        'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
        'LowerCase', 'UpperCase', '|',
        'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
        'Outdent', 'Indent', '|',
        'CreateLink', 'Image', '|',
        'ClearFormat', 'Print', 'SourceCode', 'FullScreen', '|',
        'Undo', 'Redo'
      ]
    };
  }

  private content1 = () => {
    return (
      <RichTextEditorComponent ref={this.editorRef1} toolbarSettings={this.tools}>
        <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, Table, PasteCleanup]} />
      </RichTextEditorComponent>
    );
  }

  private content2 = () => {
    return (
      <RichTextEditorComponent ref={this.editorRef2} toolbarSettings={this.tools}>
        <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, Table, PasteCleanup]} />
      </RichTextEditorComponent>
    );
  }

  private content3 = ()=> {
    return (
      <RichTextEditorComponent ref={this.editorRef3} toolbarSettings={this.tools}>
        <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, Table, PasteCleanup]} />
      </RichTextEditorComponent>
    );
  }

    
    public render() {
      return (
        <div>
             <TabComponent heightAdjustMode='Auto'>
                <TabItemsDirective>
                  <TabItemDirective header={this.headerText[0]} content={this.content1} />
                  <TabItemDirective header={this.headerText[1]} content={this.content2} />
                  <TabItemDirective header={this.headerText[2]} content={this.content3} />
                </TabItemsDirective>
              </TabComponent>
        </div>
      );
    }
}

export default App;

[Functional-component]

app.jsx

import { useRef } from 'react';
import * as React from 'react';
import {TabComponent,TabItemDirective,TabItemsDirective} from '@syncfusion/ej2-react-navigations';
import {HtmlEditor,Image,Inject,Link,QuickToolbar,RichTextEditorComponent,Toolbar,Table,PasteCleanup} from '@syncfusion/ej2-react-richtexteditor';

function App() {
  let editorRef1 = useRef(null);
  let editorRef2 = useRef(null);
  let editorRef3 = useRef(null);
  let headerText = [{ text: 'TAB 1' }, { text: 'TAB 2' }, { text: 'TAB 3' }];
  const tools = {
    items: [
      'Bold',
      'Italic',
      'Underline',
      'StrikeThrough',
      'FontName',
      'FontSize',
      'FontColor',
      'BackgroundColor',
      'LowerCase',
      'UpperCase',
      '|',
      'Formats',
      'Alignments',
      'OrderedList',
      'UnorderedList',
      'Outdent',
      'Indent',
      '|',
      'CreateLink',
      'Image',
      '|',
      'ClearFormat',
      'Print',
      'SourceCode',
      'FullScreen',
      '|',
      'Undo',
      'Redo',
    ],
  };

  const content1 = () => {
    return (
      <div>
        <RichTextEditorComponent ref={editorRef1} toolbarSettings={tools}>
          <Inject
            services={[
              Toolbar,
              Link,
              Image,
              HtmlEditor,
              QuickToolbar,
              Table,
              PasteCleanup,
            ]}
          />
        </RichTextEditorComponent>
      </div>
    );
  };

  const content2 = () => {
    return (
      <div>
        <RichTextEditorComponent ref={editorRef2} toolbarSettings={tools}>
          <Inject
            services={[
              Toolbar,
              Link,
              Image,
              HtmlEditor,
              QuickToolbar,
              Table,
              PasteCleanup,
            ]}
          />
        </RichTextEditorComponent>
      </div>
    );
  };

  const content3 = () => {
    return (
      <div>
        <RichTextEditorComponent ref={editorRef3} toolbarSettings={tools}>
          <Inject
            services={[
              Toolbar,
              Link,
              Image,
              HtmlEditor,
              QuickToolbar,
              Table,
              PasteCleanup,
            ]}
          />
        </RichTextEditorComponent>
      </div>
    );
  };
  return (<div>
       <TabComponent heightAdjustMode="Auto">
        <TabItemsDirective>
          <TabItemDirective header={headerText[0]} content={content1} />
          <TabItemDirective header={headerText[1]} content={content2} />
          <TabItemDirective header={headerText[2]} content={content3} />
        </TabItemsDirective>
      </TabComponent>
    </div>
  );
}
export default App;

app.tsx

import { useRef } from 'react';
import * as React from 'react';
import {TabComponent,TabItemDirective,TabItemsDirective} from '@syncfusion/ej2-react-navigations';
import {HtmlEditor,Image,Inject,Link,QuickToolbar,RichTextEditorComponent,Toolbar,Table,PasteCleanup} from '@syncfusion/ej2-react-richtexteditor';

function App() {
    let editorRef1 = useRef<RichTextEditorComponent>(null);
    let editorRef2 = useRef<RichTextEditorComponent>(null);
    let editorRef3 = useRef<RichTextEditorComponent>(null);
    let headerText = [{ text: 'TAB 1' }, { text: 'TAB 2' }, { text: 'TAB 3' }];
    const tools = {
      items: [
        'Bold',
        'Italic',
        'Underline',
        'StrikeThrough',
        'FontName',
        'FontSize',
        'FontColor',
        'BackgroundColor',
        'LowerCase',
        'UpperCase',
        '|',
        'Formats',
        'Alignments',
        'OrderedList',
        'UnorderedList',
        'Outdent',
        'Indent',
        '|',
        'CreateLink',
        'Image',
        '|',
        'ClearFormat',
        'Print',
        'SourceCode',
        'FullScreen',
        '|',
        'Undo',
        'Redo',
      ],
    };
  
    const content1 = () => {
      return (
        <div>
          <RichTextEditorComponent ref={editorRef1} toolbarSettings={tools}>
            <Inject
              services={[
                Toolbar,
                Link,
                Image,
                HtmlEditor,
                QuickToolbar,
                Table,
                PasteCleanup,
              ]}
            />
          </RichTextEditorComponent>
        </div>
      );
    };
  
    const content2 = () => {
      return (
        <div>
          <RichTextEditorComponent ref={editorRef2} toolbarSettings={tools}>
            <Inject
              services={[
                Toolbar,
                Link,
                Image,
                HtmlEditor,
                QuickToolbar,
                Table,
                PasteCleanup,
              ]}
            />
          </RichTextEditorComponent>
        </div>
      );
    };
  
    const content3 = () => {
      return (
        <div>
          <RichTextEditorComponent ref={editorRef3} toolbarSettings={tools}>
            <Inject
              services={[
                Toolbar,
                Link,
                Image,
                HtmlEditor,
                QuickToolbar,
                Table,
                PasteCleanup,
              ]}
            />
          </RichTextEditorComponent>
        </div>
      );
    };
  
  return (
    <div>
      <TabComponent heightAdjustMode="Auto">
        <TabItemsDirective>
          <TabItemDirective header={headerText[0]} content={content1} />
          <TabItemDirective header={headerText[1]} content={content2} />
          <TabItemDirective header={headerText[2]} content={content3} />
        </TabItemsDirective>
      </TabComponent>
    </div>
  );
}
export default App;