1025962: Add DocumentEditor details as a separate page #3658
+265
−0
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,263 @@ | ||
| --- | ||
| layout: post | ||
| title: DocumentEditorContainer vs DocumentEditor in React | Syncfusion | ||
|
Collaborator
There was a problem hiding this comment. Don't use class or API names. Change into real time heading. |
||
| description: Learn the differences between DocumentEditorContainer and DocumentEditor in the Syncfusion React DOCX Editor and learn when to use each component. | ||
| platform: document-processing | ||
| control: DocumentEditor | ||
| documentation: ug | ||
| domainurl: ##DomainURL## | ||
| --- | ||
|
|
||
| # DocumentEditorContainer vs DocumentEditor in React DOCX Editor | ||
|
Collaborator
There was a problem hiding this comment. Instead of vs, use "and", other proper terms |
||
|
|
||
| In this article, we explain the differences between **DocumentEditorContainer** and **DocumentEditor**, and also describe how to use the **DocumentEditor** component in the React DOCX Editor. | ||
|
Collaborator
There was a problem hiding this comment. Add API reference link for the API always (class names, APIs) |
||
|
|
||
| ## Difference between DocumentEditorContainer and DocumentEditor | ||
|
|
||
| The **DocumentEditor** component provides a flexible foundation for creating, viewing, and editing Word documents. Unlike **DocumentEditorContainer**, this component allows you to customize the UI options based on your specific requirements. | ||
|
Collaborator
There was a problem hiding this comment. Why this paragraph, bullet points enough |
||
|
|
||
| - **DocumentEditorContainer**: A complete solution with a predefined toolbar and properties pane that provides a comprehensive document editing experience. It allows users to create, view, and edit Word documents with minimal configuration. | ||
| - **DocumentEditor**: A customizable component that provides a flexible foundation for creating, viewing, and editing Word documents. This component allows you to build a user interface based on your specific requirements. | ||
|
|
||
| ### When to Use DocumentEditorContainer and DocumentEditor | ||
|
Collaborator
There was a problem hiding this comment. Change casing in all headings
|
||
|
|
||
| - Choose **DocumentEditorContainer** for standard document editing scenarios (applications similar to Microsoft Word). | ||
| - Choose **DocumentEditor** for advanced or unique UI/UX requirements where customization is key. | ||
|
|
||
| ## Adding DocumentEditor component | ||
|
|
||
| {% tabcontents %} | ||
|
|
||
| {% tabcontent TypeScript %} | ||
|
|
||
| Add the DocumentEditor component to your application. In the `src/App.tsx` file, add the following code to initialize the component with the required services | ||
|
|
||
| ```ts | ||
| import * as React from 'react'; | ||
| import { | ||
| DocumentEditorComponent, | ||
| 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 | ||
| ); | ||
|
|
||
| function App() { | ||
| return ( | ||
| <DocumentEditorComponent | ||
| id="container" | ||
| height={'330px'} | ||
| serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" | ||
| 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} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| export default App; | ||
| ``` | ||
| N> The hosted Web API URL is for demo and evaluation purposes only. For production, host your own web service using the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or the [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server). | ||
|
|
||
| {% tabs %} | ||
| {% highlight ts tabtitle="app.tsx" %} | ||
| {% include code-snippet/document-editor/react/base-cs2/app/index.tsx %} | ||
| {% endhighlight %} | ||
| {% endtabs %} | ||
|
|
||
| {% previewsample "/document-processing/code-snippet/document-editor/react/base-cs2" %} | ||
|
|
||
| {% endtabcontent %} | ||
|
|
||
| {% tabcontent JavaScript %} | ||
|
|
||
| Add the DocumentEditor component to your application. In the `src/App.jsx` file, add the following code to initialize the component with the required services | ||
|
|
||
| ```jsx | ||
| import React from 'react'; | ||
| import { | ||
| DocumentEditorComponent, | ||
| 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 | ||
| ); | ||
|
|
||
| function App() { | ||
| return ( | ||
| <DocumentEditorComponent | ||
| id="container" | ||
| height="330px" | ||
| serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" | ||
| 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} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| export default App; | ||
|
|
||
| ``` | ||
| N> The hosted Web API URL is for demo and evaluation purposes only. For production, host your own web service using the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or the [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server). | ||
|
|
||
| {% tabs %} | ||
| {% highlight ts tabtitle="app.jsx" %} | ||
| {% include code-snippet/document-editor/react/base-cs2/app/index.jsx %} | ||
| {% endhighlight %} | ||
| {% endtabs %} | ||
|
|
||
| {% previewsample "/document-processing/code-snippet/document-editor/react/base-cs2" %} | ||
|
|
||
| {% endtabcontent %} | ||
|
|
||
| {% endtabcontents %} | ||
|
|
||
| ## See Also | ||
|
|
||
| * [How to customize toolbar](./customize-tool-bar) | ||
| * [How to use DocumentEditor Container Component](../getting-started.md) | ||
|
Collaborator
There was a problem hiding this comment. DocumentEditor Container or DocumentEditorContainer use proper term in entire page |
||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you change with proper real time topic,