The document editor for React is used to create, edit, view, and print Word documents. It provides all common word processing features including text editing, content formatting, image and table resizing, text find and replace, bookmarks, tables of contents, printing, and Word document importing and exporting. It allows you to add a WYSIWYG and Microsoft Word-compatible, HTML5-based online word processor to your web applications.
The document editor is designed and optimized for high performance in every aspect.
Each independent functionality is defined as a separate module. This helps in building a lightweight document editor in your application without losing loading speed.
The virtualized page rendering approach renders pages on demand and helps reduce the initial load time and memory consumption when working with large documents.
The document editor provides intuitive and touch-friendly UI options like context menu, navigation pane, and dialogs.
Interactively zoom in and zoom out of page contents through touch gestures, mouse, and keyboard.
You can scroll between the document pages rapidly through touch, mouse, and keyboard interactions.
The context menu comes with all common word processing features. The list of available actions is updated automatically based on the selection context.
Enhance the user experience with the help of dialogs for inserting document elements and advanced formatting options.
Resizing images in the document editor is an awesome user experience. It works interactively with both touch and mouse actions.
The rows and columns of a table can be resized interactively by the user as needed.
Enjoy a smooth and responsive editing experience for mouse, touch, and keyboard interfaces that runs completely on the client side.
Flexible selection options through touch, mouse, and keyboard actions enhance the editing experience.
Cut, copy, and paste formatted content within the same document. Also, you can paste plain text to and from other applications.
Perform multiple levels of undo and redo operations.
The document editor comes with built-in find and replace functionality, which allows users to navigate and modify text within a document. The Microsoft Word-inspired navigation pane provides intuitive UI options to search text and navigate through search results.
The document editor includes all commonly used document elements like text, images, tables, hyperlinks, bookmarks, tables of contents, page fields, headers, and footers.
Allows users to create or edit documents with various language texts.
Easily browse for an image from a file and insert it into the editor as inline with text. Supports all common raster image formats like PNG, BMP, JPEG, GIF, and more.
Create simple or complex nested tables with rich formatting like indents, alignment, cell margins and spacing, borders, shading, repeat header rows, rows broken across pages, and more. Users can add or remove cells and rows, and merge or resize cells depending on their contents.
Easily create a link in a document for quick access to webpages, files, emails, bookmarks, and more through a built-in dialog and Microsoft Word-inspired automatic conversion of text to hyperlink. Navigation can also be customized programmatically to open targets from other applications.
Easily insert bookmarks to identify a part of a document for future reference. Navigate to an existing bookmark in the document interactively through a built-in dialog.
Easily add a table of contents in a document to outline its content. A built-in dialog provides intuitive options to choose heading and custom styles, add page numbers, and provide hyperlinks for easy navigation. After modifying an existing document, the user can update the table of contents through a context menu option.
Add dynamic page numbers to a document that update automatically.
Easily open and edit header and footer content by double-clicking or double-tapping the header or footer area. Users can specify different a header and footer for the first page, odd pages, and even pages of each section. The header and footer can be added with any content like text, images, page numbers, and more.
The document editor includes all the commonly used document formatting options.
Customize the appearance of the text with text-level formatting options like font family, font size, style (bold, italic, or underline), strikethrough, text color, highlight, subscript, and superscript.
Customize the appearance of a paragraph with several paragraph-level formatting features like indent, alignment, and spacings.
Organize items or create an outline of the document with bullets and numbering ranging from a single level to multilevel lists.
Design the structure and layout of document pages with several properties like size, margins, orientation, header distance, and footer distance.
Users can create, edit, and apply styles to ensure consistency within a document, just like Microsoft Word. It supports both character and paragraph styles.
The document editor helps developers add Microsoft Word-inspired word processing capabilities to their applications. It introduces a new native Syncfusion Document Text (*.sfdt) file format, which helps maintain the document import and export functionalities on the client side.
Import document content from SFDT format purely on the client side. It ships with a server-side helper library which converts Word documents (DOCX, WordML, DOC, RTF, and TXT) to SFDT format. You can also customize document importing programmatically to open documents from other applications.
Export the document content to SFDT and DOCX formats purely on the client-side. The exported document can also be customized programmatically. This allows documents from the document editor to be used in other applications.
Print the rendered document pages directly from the browser. The end user can choose to print the entire document or a specific page interactively.
All the document editor strings in the user interface can be localized as needed. The document editor uses the Essential JS 2 localization library to localize the strings.