Rich Text Editor Control for React with IE 11 Support

Question

I want to implement an SPFX web part with React using which user can provide their view on the given questions. Users should be able to add images or links or use formatting for the text to provide their views.

I checked the CKEditor. but it does not support IE11. Currently checking the mui-rte control.

Can anyone provide the other options available for the Rich Text Editor with React which supports IE 11?

Thanks in advance.

Update:

I implemented ckeditor4. followed the steps mentioned here.

But in chrome, no toolbar is shown.

and in Internet Explorer, it gives error shown in the below screenshot.

Note: Polyfill is already installed. Also, if I remove the CKEditor code then web part renders successfully in Internet Explorer.

Answer 1

I have used ej2-react-richtexteditor plugin for rich text.

NPM Command: npm install @syncfusion/ej2-react-richtexteditor

Please see below code to add this control in tsx file:

import * as React from 'react';
import styles from './ReactTextArea.module.scss';
import { IReactTextAreaProps } from './IReactTextAreaProps';
import { escape } from '@microsoft/sp-lodash-subset';

import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';

import { RichText } from '@pnp/spfx-controls-react/lib/RichText';
import { RichTextEditor, Toolbar, Link, Image, ToolbarType, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-richtexteditor';
import { addClass, removeClass, Browser } from '@syncfusion/ej2-base';

require('@syncfusion/ej2-react-richtexteditor/styles/rich-text-editor/material.css');
require('@syncfusion/ej2-base/styles/material.css');
require('@syncfusion/ej2-buttons/styles/material.css');
require('@syncfusion/ej2-icons/styles/material.css');
require('@syncfusion/ej2-lists/styles/material.css');
require('@syncfusion/ej2-popups/styles/material.css');
require('@syncfusion/ej2-navigations/styles/material.css');
require('@syncfusion/ej2-inputs/styles/material.css');
require('@syncfusion/ej2-splitbuttons/styles/material.css');

RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, QuickToolbar);

export default class ReactTextArea extends React.Component<IReactTextAreaProps, {}> {

  public componentDidMount() {
    let defaultRTE: RichTextEditor = new RichTextEditor({

      toolbarSettings: {
        type: ToolbarType.Expand,
        items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
          'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
          'LowerCase', 'UpperCase', '|',
          'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
          'Outdent', 'Indent', '|',
          'CreateLink', 'Image', '|', 'ClearFormat', 'Print',
          'SourceCode', '|', 'Undo', 'Redo']
      },
      //actionBegin: handleFullScreen,
      // actionComplete: actionCompleteHandler,
      height: 300,
      width: "100%"
    });
    defaultRTE.appendTo('#defaultRTE');
  }

  public SaveText() {
    var text = document.getElementById('defaultRTE_rte-edit-view').textContent;
    console.log(text);

  }

  public render(): React.ReactElement<IReactTextAreaProps> {
    return (
      <div id="container">
        <div id="defaultRTE">
          <p>The rich text editor component is a WYSIWYG (what you see is what you get) editor that provides the best user experience for creating and updating content. Users can format their content using standard toolbar commands. You can format text, paragraphs, characters; add images, links, and lists; etc. The commands are grouped together based on related functionality.</p>
        </div>
        <div>
        </div>
        <input type="button" id="btnSubmit" onClick={this.SaveText} title="Submit" />
      </div>
    );
  }

}

//   private handleFullScreen(e: any): void {
//     let leftBar: HTMLElement;
//     let transformElement: HTMLElement;
//     if (Browser.isDevice) {
//         leftBar = document.querySelector('#right-sidebar');
//         transformElement = document.querySelector('.sample-browser.e-view.e-content-animation');
//     } else {
//         leftBar = document.querySelector('#left-sidebar');
//         transformElement = document.querySelector('#right-pane');
//     }
//     if (e.targetItem === 'Maximize') {
//         addClass([leftBar], ['e-close']);
//         removeClass([leftBar], ['e-open']);
//         if (!Browser.isDevice) { transformElement.style.marginLeft = '0px'; }
//         transformElement.style.transform = 'inherit';
//     } else if (e.targetItem === 'Minimize') {
//         removeClass([leftBar], ['e-close']);
//         if (!Browser.isDevice) {
//         addClass([leftBar], ['e-open']);
//         transformElement.style.marginLeft = leftBar.offsetWidth + 'px'; }
//         transformElement.style.transform = 'translateX(0px)';
//     }
// }

// public actionCompleteHandler(): void {
//     setTimeout(() => { defaultRTE.toolbarModule.refreshToolbarOverflow(); }, 400);
// }

Here, I am taking content from this control and logging in console. You can save this to list column using Rest API.

I have also tested this with IE 11 and its working fine. See screenshot below:

Hope this will help you!