technology
Jenzy

Jenzy

web - developer

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.
  • image.png
  • 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. image.png
  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

image.png

It supported framework:

image.png

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);
            };
        

Related Posts

Charts - Rechart

placeholder for testing imagme
technology

The chart library in Shadcn used Rechart under development style.

Disable CROS in Google Chrome

Disable cross origin in Google Chrome
technology

Disable Cross origin in Google Chrome for web development.

Elon Musk Will Alter Global Evilution

Elon Musk thumbnail
technology

Elon musk suprise the world by his released things in 2024

More Posts