EJ2 editor for Text rich editor.

For EJ2 document editor: 

• We need trail license key, (expired in 30 days)
• Code open to customize, but customize by adding attribute to editor component.
• It is available with typescript also, but still need to have license key setup.
• 
• To have this license key, we have to add “work email” to get it.

To setup EJ2 editor: 

https://ej2.syncfusion.com/documentation/document-editor/getting-started (with typescript)

https://ej2.syncfusion.com/react/documentation/document-editor/getting-started (with react)

1. Create react app
2. Add license key in index.js
   1. 
3. In app.js

   1.   import * as ReactDOM from 'react-dom';
       import * as React from 'react';
       import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react-documenteditor';
       DocumentEditorContainerComponent.Inject(Toolbar);
       function Default() {
           return (<DocumentEditorContainerComponent id="container" height={'590px'} serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/" enableToolbar={true}/>);
       }
       export default Default;
       ReactDOM.render(<Default />, document.getElementById('sample'));
      

4.    npm start or yarn start
   

Rich-text-editor-EJ2 (Need license key 🫥) 

Rich editor EJ2 look like normal editor.

https://ej2.syncfusion.com/documentation/rich-text-editor/getting-started

It supported framework:

But we can customize setting also:

import { RichTextEditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-richtexteditor';
RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, QuickToolbar);

let defaultRTE: RichTextEditor = new RichTextEditor({
  height: 340,
  quickToolbarSettings: {
    image: [
      'Replace', 'Align', 'Caption', 'Remove', 'InsertLink', 'OpenImageLink', '-',
      'EditImageLink', 'RemoveImageLink', 'Display', 'AltText', 'Dimension'
    ],
    link: ['Open', 'Edit', 'UnLink']
    },
  toolbarSettings: {
      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']
    }

});
defaultRTE.appendTo('#defaultRTE');

• It also can use with typescript with react and NextJs.

• Can past from MS Word with define tags:

  •    pasteCleanupSettings: {
              prompt: true,
              plainText: false,
              keepFormat: false,
              deniedTags: ['a'],
              deniedAttrs: ['class', 'title', 'id'],
              allowedStyleProps: ['color', 'margin', 'font-size']
          }
    

  • We also can save the content with

    •   handleSave = () => {
            // Access the content from the RichTextEditor and save it
            const content = this.richtexteditor.getContent();
      
            // Perform your save logic here (e.g., send to server, save to local storage, etc.)
            console.log('Content to save:', content);
          };