Search results

Getting Started

This section explains the steps to create a Word document editor within your application and demonstrates the basic usage of the DocumentEditor component.

Dependencies

Following is the list of minimum dependencies required to use the documenteditor.

|-- @syncfusion/ej2-react-documenteditor
    |-- @syncfusion/ej2-react-base
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-build
    |-- @syncfusion/ej2-buttons
    |-- @syncfusion/ej2-compression
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-dropdowns
    |-- @syncfusion/ej2-file-utils
    |-- @syncfusion/ej2-inputs
    |-- @syncfusion/ej2-lists
    |-- @syncfusion/ej2-navigations
    |-- @syncfusion/ej2-popups
    |-- @syncfusion/ej2-splitbuttons
    |-- @syncfusion/ej2-documenteditor

Setup for Local Development

You can use create-react-app to setup the applications. To install create-react-app run the following command.

npm install -g create-react-app
  • To setup basic React sample use following commands.
create-react-app quickstart --scripts-version=react-scripts-ts

cd quickstart

npm install

Adding Syncfusion packages

All the available Essential JS 2 packages are published in npmjs.com public registry. You can choose the component that you want to install.

To install Documenteditor component, use the following command

npm install @syncfusion/ej2-react-documenteditor --save

Adding CSS reference

Add DocumentEditor component’s styles as given below in src/App.css.

@import "../node_modules/@syncfusion/ej2-react-documenteditor/styles/material.css";

To refer App.css in the application then import it in the src/App.tsx file.

Adding DocumentEditor component

Now, you can start adding DocumentEditor component in the application. For getting started, add the DocumentEditor component in src/App.tsx file using following code.

Add the below code in the src/App.tsx to initialize the DocumentEditor.

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
    DocumentEditorComponent, DocumentEditor, RequestNavigateEventArgs, ViewChangeEventArgs,
    Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory,
    ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog,
    PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog,
    TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog
} from '@syncfusion/ej2-react-documenteditor';

DocumentEditorComponent.Inject(Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog);
export class Default extends React.Component<{}, {}> {
  render() {
    return (
        <DocumentEditorComponent id="container"  style={ 'width': '100%', 'height': '100%' } isReadOnly={false} enablePrint={true} enableSelection={true} enableEditor={true} enableEditorHistory={true} enableContextMenu={true} enableSearch={true} enableOptionsPane={true} enableBookmarkDialog={true} enableBordersAndShadingDialog={true} enableFontDialog={true} enableTableDialog={true} enableParagraphDialog={true} enableHyperlinkDialog={true} enableImageResizer={true} enableListDialog={true} enablePageSetupDialog={true} enableSfdtExport={true} enableStyleDialog={true} enableTableOfContentsDialog={true} enableTableOptionsDialog={true} enableTablePropertiesDialog={true} enableTextExport={true} enableWordExport={true} />);
  }
}
ReactDOM.render(<Default />, document.getElementById('sample'));

Module injection

To create DocumentEditor with additional features, inject the required modules. The following modules are used to extend DocumentEditor’s basic functionality.

  • Print - Inject this module to use documenteditor print feature.
  • Selection - Inject this module to use document selection feature.
  • Editor - Inject this module to enable document editing feature.
  • EditorHistory - Inject this module to use document editing with undo and redo feature.
  • Search - Inject this module to use search content within document feature.
  • OptionsPane - Inject this module to use find and replace content within document feature.
  • WordExport - Inject this module to export document in client side as Word document (*.docx) format.
  • TextExport - Inject this module to use export document in client side as Text document (.txt) format.
  • SfdtExport - Inject this module to export document in client side as Syncfusion Document Text (*.sfdt) format.
  • ImageResizer - Inject this module to use image resizer feature.
  • ContextMenu - Inject this module to use context menu when right clicked on document.
  • ParagraphDialog - Inject this module to modify paragraph format options via paragraph dialog.
  • FontDialog - Inject this module to modify character format options via font dialog.
  • HyperlinkDialog - Inject this module to insert or edit hyperlink via hyperlink dialog.
  • TableDialog - Inject this module to use insert table via insert table dialog.
  • TableOfContentsDialog - Inject this module to insert table of contents via TOC dialog.
  • PageSetupDialog - Inject this module to modify page set up via page set up dialog.
  • ListDialog - Inject this module to modify list format option via list dialog feature.
  • StyleDialog - Inject this module to create or modify style via style dialog feature.
  • StylesDialog - Inject this module to create or modify styles via style dialog feature.
  • BulletsAndNumberingDialog - Inject this module to apply or modify list paragraph style via bullet and numbering dialog feature.
  • TablePropertiesDialog - Inject this module to modify table, row and cell properties via Table Properties dialog feature.
  • BordersAndShadingDialog - Inject this module to modify borders and shading of table or cell via Borders And Shading Dialog.
  • TableOptionsDialog - Inject this module to modify table margin and spacing value via Table Options dialog
  • CellOptionsDialog - Inject this module to modify cell margin values via Cell Options dialog .
  • BookmarkDialog - Inject this module to add, navigate or delete bookmarks via Bookmark dialog .

These modules should be injected into the provider section of AppModule.

Run the application

The create-react-app will pre-configure the project to compile and run the application in browser. Use the following command to run the application.

npm start

Output will be displayed as follows.

Source
Preview
index.tsx
index.html
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
    DocumentEditorComponent, DocumentEditor, RequestNavigateEventArgs, ViewChangeEventArgs,
    Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory,
    ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog,
    PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog,
    TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog
} from '@syncfusion/ej2-react-documenteditor';


DocumentEditorComponent.Inject(Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog);
export class Default extends React.Component<{}, {}> {
  render() {
    return (
        <DocumentEditorComponent id="container" isReadOnly={false} enablePrint={true}
        enableSelection={true} enableEditor={true} enableEditorHistory={true}
        enableContextMenu={true} enableSearch={true} enableOptionsPane={true}
        enableBookmarkDialog={true} enableBordersAndShadingDialog={true} enableFontDialog={true} enableTableDialog={true} enableParagraphDialog={true} enableHyperlinkDialog={true} enableImageResizer={true} enableListDialog={true}
        enablePageSetupDialog={true} enableSfdtExport={true}
        enableStyleDialog={true} enableTableOfContentsDialog={true}
        enableTableOptionsDialog={true} enableTablePropertiesDialog={true}
        enableTextExport={true} enableWordExport={true} />
    );
  }
}
ReactDOM.render(<Default />, document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Button</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/fabric.css" rel="stylesheet" />   
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
        <div id='sample'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>