5

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.

enter image description here

But in chrome, no toolbar is shown.

enter image description here

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

enter image description here

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

  • 1
    Did you consider CKEditor4 which is supported in IE11? – Salah Feb 25 at 14:39
  • @Salah Yes, I tried. It gives error in IE11 – Litt Spector Feb 26 at 5:19
  • Please add the error message to your question; it may help. – Salah Feb 26 at 14:55
  • @Salah kindly check the updated question – Litt Spector Feb 27 at 9:41
  • You need to force the toolbar to show up with CSS: .cke .cke_top {display: block} (check Elements in console). About IE, could you please try to deploy your app and then test? – Salah Feb 28 at 8:26
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: enter image description here

Hope this will help you!

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.