We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
The React Word Processor is a feature rich UI component with editing capabilities like Microsoft Word. Also known as the document editor, it is used to create, edit, view, and print Word documents. It provides all the common Word processing features including editing text, formatting contents, resizing images and tables, finding and replacing text, bookmarks, tables of contents, printing, and importing and exporting Word documents.
The React Word Processor has been designed and optimized for high performance.
The Word Processor is a feature-rich Word document editor component. With it, you can add a Microsoft-Word-like word processing solution in your web application.
The Word Processor allows you to restrict editing. When a protected document has range permissions, only a unique user or user group is authorized to modify a separate text area.
You can add comments to documents using Document Editor. In both code and the UI, you may add, navigate, and remove comments.
The track changes feature keeps a record of changes and edits made to a document. You can then accept or reject the changes. It is a useful tool for managing modifications made by multiple reviewers in the same document.
The Word Processor has an intuitive UI for creating fillable forms in documents by inserting legacy form fields, just like Microsoft Word. Once the document is protected with the FormFieldsOnly restriction, users can fill the form.
Cutting-edge design with several built-in themes, such as Fluent, Tailwind CSS, Bootstrap, Material, and Fabric. Utilize the online Theme Studio tool to customize themes of word processor easily.
Enable users from different locales to use the component by formatting dates, currency, and numbering to suit preferences.
Easily get started with the React Word Processor using a few simple lines of TSX code example as demonstrated below. Also explore our React Word Processor Example that shows you how to configure the word processor in React.
import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { SampleBase } from './sample-base';
import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react-documenteditor';
import { TitleBar } from './title-bar';
DocumentEditorContainerComponent.Inject(Toolbar);
// tslint:disable:max-line-length
export class Default extends SampleBase {
constructor() {
super(...arguments);
this.hostUrl = 'https://ej2services.syncfusion.com/production/web-services/';
this.onLoadDefault = () => {
this.container.documentEditor.documentName = 'Getting Started';
this.titleBar.updateDocumentTitle();
this.container.documentChange = () => {
this.titleBar.updateDocumentTitle();
this.container.documentEditor.focusIn();
};
};
}
rendereComplete() {
this.container.serviceUrl = this.hostUrl + 'api/documenteditor/';
this.container.documentEditor.pageOutline = '#E0E0E0';
this.container.documentEditor.acceptTab = true;
this.container.documentEditor.resize();
this.titleBar = new TitleBar(document.getElementById('documenteditor_titlebar'), this.container.documentEditor, true);
this.onLoadDefault();
}
render() {
return (<div className='control-pane'>
<div className='control-section'>
<div id='documenteditor_titlebar' className="e-de-ctn-title"></div>
<div id="documenteditor_container_body">
<DocumentEditorContainerComponent id="container" ref={(scope) => { this.container = scope; }} style=display height={'590px'} enableToolbar={true} locale='en-US'/>
</div>
</div>
<script>{window.onbeforeunload = function () {
return 'Want to save your changes?';
}}
</script>
</div>);
}
}
render(<Default />, document.getElementById('sample'));The React Word Processor (Document Editor) provides a new native file format called Syncfusion Document Text (*.sfdt). It helps maintain document import and export purely on the client-side.
Provides a .NET library that helps convert Word documents (DOCX, WordML, DOC, RTF, TXT) to SFDT format at server side.
Import the SFDT format document content from a local file or string.
Export the document content to SFDT and DOCX formats as a blob or downloadable file.
The React Word Processor comes with a Microsoft Word-inspired navigation pane. It provides intuitive UI options to search text, navigate between the results, and replace it with other text.
The React Word Processor allows users to print an entire document or a specific page directly from the browser.
Enjoy a smooth and user-friendly experience for mouse, touch, and keyboard interfaces with React Word Processor.
Flexible selection options using mouse, touch, or Microsoft Word like keyboard shortcuts.
Interactively zoom in and zoom out the page contents. Users can easily change view to fit a page or page width.
The React Word Processor provides seamless editing experience and offers intuitive and touch-friendly UI options like context menus, dialogs, and a navigation pane.
Cut, copy, and paste of formatted content within the same document. Also paste plain text to and from other applications.
Insert document elements and apply advanced formatting options with ease.
The context menu provides options to perform common editing actions. The list of actions is updated automatically based on the selection context.
Provides an awesome user experience to interactively resize an image using mouse or touch.
Adjust a row height or column width interactively.
The React Word Processor includes all the commonly used document elements like text, images, tables, hyperlinks, bookmarks, table of contents, page fields, sections, headers, and footers.
Create or edit documents with text in various languages.
Easily browse for an image file or online image URL and insert text in line . Common raster image formats like PNG, BMP, JPEG, and GIF, are supported.
Create simple or complex nested tables using built-in dialog. Also add or remove rows and columns, define header rows, merge, or resize cells depending on their contents.
Mark a place in the document to find it again easily. Users can enter as many bookmarks as needed in the document and give each one a unique name to identify it.
Add dynamic page numbers to a document that updates automatically.
Use line break, page break, or section break to get the documents formatted better.
Link text for quick access to web page, file, email, bookmark, etc. Users can insert links using built-in dialog and Microsoft Word-inspired automatic conversion of text to link. Moreover, navigation can be customized to open the target from other applications.
Outline the headings in a document and easily navigate to it, and shows page numbers too. Users can customize it using built-in dialog.
Easily add page numbers, dates, or author’s name at one place to be repeated at the top or bottom of each page. However, users can specify different headers or footers for the first page and odd and even pages of each section.
The React Word Processor includes all the commonly used document formatting options.
Format text using bold, italics, underline, font family, size, color, highlight, subscript, superscript, and more.
Format paragraphs with indentation, alignment, and spacing.
Organize items or create an outline of a document with bullets and numbering. Both single and multilevel lists can be added.
Apply built-in styles to ensure consistency within a document. In addition, modify it or create custom styles. Both character and paragraph styles are supported in React Word Processor.
Format the table with indent, alignment, cell margins and spacing, borders, shadings, row height, break row across pages, and more.
Design the structure and layout of document pages in each section by customizing size, margins, header distance, footer distance, etc.
Word Processor is also available in Blazor, React, Vue, and JavaScript frameworks. Check out the different Word Processor platforms from the links below,
The Vue Word Processor works well with all modern web browsers such as Chrome, Firefox, Microsoft Edge, Safari, and Opera.
You can find our React Word Processor demo, which demonstrates how to render and configure the Word Processor.
No, this is a commercial product and requires a paid license. However, a free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
A good place to start would be our comprehensive getting started documentation.
Documentation
Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion is proud to hold the following industry awards.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
