From f9209857c596d01ba46e071fbe233ccb2f0e7cae Mon Sep 17 00:00:00 2001 From: Vellaisamy Auvudaiappan Date: Mon, 27 Jul 2026 12:42:38 +0530 Subject: [PATCH 1/8] 1043289-files changed in font-family,ribbon,tool-bar customize --- .../how-to/customize-font-family-drop-down.md | 14 +++++------ .../react/how-to/customize-ribbon.md | 22 ++++++++-------- .../react/how-to/customize-tool-bar.md | 25 +++++++------------ 3 files changed, 27 insertions(+), 34 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/react/how-to/customize-font-family-drop-down.md b/Document-Processing/Word/Word-Processor/react/how-to/customize-font-family-drop-down.md index d608e11d14..11b7f1695e 100644 --- a/Document-Processing/Word/Word-Processor/react/how-to/customize-font-family-drop-down.md +++ b/Document-Processing/Word/Word-Processor/react/how-to/customize-font-family-drop-down.md @@ -1,16 +1,16 @@ --- layout: post -title: Customize font dropdown in React Document Editor | Syncfusion -description: Learn here all about Customize font family drop down in Syncfusion React Document editor component of Syncfusion Essential JS 2 and more. +title: Customize font dropdown in React DOCX Editor | Syncfusion +description: Learn here all about Customize font family drop down in Syncfusion React Document Editor component of Syncfusion Essential JS 2 and more. control: Customize font family drop down platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Customize font family drop down in React Document editor component +# Customize font family drop down in React Document Editor component -[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) provides an options to customize the font family drop down list values using [`fontfamilies`](https://ej2.syncfusion.com/react/documentation/api/document-editor/documentEditorSettingsModel#fontfamilies) in Document editor settings. Fonts which are added in fontFamilies of [`documentEditorSettings`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container#documenteditorsettings) will be displayed on font drop down list of text properties pane and font dialog. +[React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) provides options to customize the font family drop-down list values using [`fontfamilies`](https://ej2.syncfusion.com/react/documentation/api/document-editor/documentEditorSettingsModel#fontfamilies) in Document editor settings. Fonts added in the `fontFamilies` of [`documentEditorSettings`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container#documenteditorsettings) will be displayed in the font drop-down list of the Text Properties pane and the Font dialog. Similarly, you can use [`documentEditorSettings`](https://ej2.syncfusion.com/react/documentation/api/document-editor#documenteditorsettings) property for DocumentEditor also. @@ -25,7 +25,7 @@ import { } from '@syncfusion/ej2-react-documenteditor'; DocumentEditorContainerComponent.Inject(Toolbar); function App() { - // Add required font families to list it in font drop down + // Add the required font families to list them in the font drop-down let fontFamilies = { fontFamilies: ['Algerian', 'Arial', 'Calibri', 'Cambria'], }; @@ -43,8 +43,8 @@ export default App; ReactDOM.render(, document.getElementById('sample')); ``` -> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. +N> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. -Output will be like below: +The output will be as shown below: ![Font](../images/font-family.png) \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/react/how-to/customize-ribbon.md b/Document-Processing/Word/Word-Processor/react/how-to/customize-ribbon.md index 615a8550f2..de32e09a5e 100644 --- a/Document-Processing/Word/Word-Processor/react/how-to/customize-ribbon.md +++ b/Document-Processing/Word/Word-Processor/react/how-to/customize-ribbon.md @@ -1,6 +1,6 @@ --- layout: post -title: Customize Ribbon in React Document Editor | Syncfusion +title: Customize Ribbon in React DOCX Editor | Syncfusion description: Learn how to customize the ribbon in Syncfusion React Document Editor - file menu, backstage, tabs, groups, and items. platform: document-processing control: Ribbon Customization @@ -8,9 +8,9 @@ documentation: ug domainurl: ##DomainURL## --- -# Customize Ribbon in React Document editor component +# Customize Ribbon in React Document Editor component -The [React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) provides an extensive and flexible API to customize the built-in ribbon UI. You can: +The [React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) provides a rich and flexible API to customize the built-in ribbon UI. You can: - Customize the File menu. - Add the Backstage menu instead of File menu. @@ -22,7 +22,7 @@ Below are detailed examples for each ribbon customization scenario. ## File Menu Customization -Document Editor provides APIs to remove existing File menu items and add new custom items based on your requirements. You can modify the File menu using the [`fileMenuItems`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container#filemenuitems) property. +Document Editor provides APIs to remove existing built-in File menu items and add new custom items based on your requirements. You can modify the File menu using the [`fileMenuItems`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container#filemenuitems) property. In the example below, the "Open" and "Export" items have been removed from the File Menu Items, and new custom items have been added. @@ -116,7 +116,7 @@ root.render(); ``` {% endraw %} -Refer this documentation know more about [`backstage items`](https://ej2.syncfusion.com/documentation/ribbon/backstage) +Refer to this documentation to know more about [`backstage items`](https://ej2.syncfusion.com/documentation/ribbon/backstage) ## Tab Customization @@ -124,9 +124,9 @@ You can customize the ribbon tabs in the Document Editor by showing, hiding, or ### Show/Hide Tab -Document editor provides the [`showTab`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container/ribbon#showtab) API to show and hide the existing tab using existing `RibbonTabType` and `tabId`. +Document editor provides the [`showTab`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container/ribbon#showtab) API to show and hide the existing tab using a `RibbonTabType` and `tabId`. -The following code example how to show/hide existing tab using existing tab type and tab id. +The following code example shows how to show/hide an existing tab using the existing tab type and tab id. ```ts // To hide the Home tab using the built-in `RibbonTabType` @@ -302,9 +302,9 @@ You can customize individual items within ribbon groups. This includes showing, ### Show/Hide Item -Using [`showItems`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container/ribbon#showitems) API in Document editor ribbon to enable/disable the existing item. Here, you can specify the item Id or [`RibbonItemInfo`]. +Using the [`showItems`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container/ribbon#showitems) API in the Document Editor ribbon to show/hide the existing item. Here, you can specify the item Id or [`RibbonItemInfo`]. -The following code example show how to show/hide the item using item Id or [`RibbonItemInfo`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container#ribboniteminfo). +The following code example shows how to show/hide the item using item Id or [`RibbonItemInfo`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container#ribboniteminfo). ```ts // To hide the Bold and Italic items using ribbon item information @@ -319,7 +319,7 @@ container.current.ribbon.showItems('custom_item', false); ### Enable/Disable Item -Using [`enableItems`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container/ribbon#enableitems) API in Document editor ribbon to enable/disable the existing item. +Using the [`enableItems`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container/ribbon#enableitems) API in the Document Editor ribbon to enable/disable the existing item. ```ts // To disable the underline using ribbon item info @@ -402,4 +402,4 @@ Explore how to customize the ribbon in the React Document Editor for working wit ## Related Links -- [File menu Customization Demo](https://ej2.syncfusion.com/demos#/material/document-editor/ribbon-customization) \ No newline at end of file +- [File Menu Customization Demo](https://ej2.syncfusion.com/demos#/material/document-editor/ribbon-customization) \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/react/how-to/customize-tool-bar.md b/Document-Processing/Word/Word-Processor/react/how-to/customize-tool-bar.md index e5ad5382f0..247b76c91c 100644 --- a/Document-Processing/Word/Word-Processor/react/how-to/customize-tool-bar.md +++ b/Document-Processing/Word/Word-Processor/react/how-to/customize-tool-bar.md @@ -1,24 +1,24 @@ --- layout: post -title: Customize tool bar in React Document editor component | Syncfusion -description: Learn here all about Customize tool bar in Syncfusion React Document editor component of Syncfusion Essential JS 2 and more. +title: Customize tool bar in React DOCX Editor component | Syncfusion +description: Learn here all about Customize tool bar in Syncfusion React Document Editor component of Syncfusion Essential JS 2 and more. control: Customize tool bar platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Customize tool bar in React Document editor component +# Customize tool bar in React Document Editor component ## How to customize existing toolbar in DocumentEditorContainer -[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) Container allows you to customize(add, show, hide, enable, and disable) existing items in a toolbar. +[React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) Container allows you to customize (add, show, hide, enable, and disable) existing items in a toolbar. -* Add - New items can defined by [`CustomToolbarItemModel`](https://ej2.syncfusion.com/react/documentation/api/document-editor/customToolbarItemModel/) and with existing items in [`toolbarItems`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container#toolbaritems) property. Newly added item click action can be defined in [`toolbarClick`](https://ej2.syncfusion.com/react/documentation/api/toolbar/clickEventArgs/). +* Add - New items can be defined by [`CustomToolbarItemModel`](https://ej2.syncfusion.com/react/documentation/api/document-editor/customToolbarItemModel/) and with existing items in [`toolbarItems`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container#toolbaritems) property. Newly added item click action can be defined in [`toolbarClick`](https://ej2.syncfusion.com/react/documentation/api/toolbar/clickEventArgs/). * Show, Hide - Existing items can be shown or hidden using the [`toolbarItems`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container#toolbaritems) property. Pre-defined toolbar items are available with [`ToolbarItem`](https://ej2.syncfusion.com/react/documentation/api/document-editor/toolbarItem/). -* Enable, Disable - Toolbar items can be enabled or disable using [`enableItems`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container/toolbar#enableItems) +* Enable, Disable - Toolbar items can be enabled or disabled using [`enableItems`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container/toolbar#enableItems) {% raw %} ```ts @@ -74,16 +74,9 @@ function App() { function onToolbarClick(args) { switch (args.item.id) { case 'save': - //Save the document(Download the document) + //Save the document (Download the document) container.documentEditor.save('sample', 'Docx'); break; - default: - break; - } - } - - function onToolbarClick(args) { - switch (args.item.id) { case 'Custom': //Disable image toolbar item. container.toolbar.enableItems(4, false); @@ -116,7 +109,7 @@ function App() { height={'590px'} serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/" toolbarItems={items} - toolbarClick={onToolbarClick.bind(this)} + toolbarClick={onToolbarClick} enableToolbar={true} /> @@ -128,7 +121,7 @@ createRoot(document.getElementById('sample')).render(); ``` {% endraw %} ->Note: Default value of `toolbarItems` is `['New', 'Open', 'Separator', 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl']`. +N> Default value of `toolbarItems` is `['New', 'Open', 'Separator', 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl']`. ## Online Demo From d7fc2580c3d27fc15d0f64e302d1f013f980900c Mon Sep 17 00:00:00 2001 From: Vellaisamy Auvudaiappan Date: Tue, 28 Jul 2026 10:57:02 +0530 Subject: [PATCH 2/8] 1043289-empty commit From 307a756736896ced78ec626b7f21459b0c3b411e Mon Sep 17 00:00:00 2001 From: Vellaisamy Auvudaiappan Date: Tue, 28 Jul 2026 11:34:03 +0530 Subject: [PATCH 3/8] 1043289-empty commit From c0961cdba8ac4756fb6f45e0edf82b55a5588729 Mon Sep 17 00:00:00 2001 From: Vellaisamy Auvudaiappan Date: Tue, 28 Jul 2026 11:36:41 +0530 Subject: [PATCH 4/8] 1043289-empty commit From da75b13c9fbe50cdff2c5bb37fc15a7e537ad83e Mon Sep 17 00:00:00 2001 From: Vellaisamy Auvudaiappan Date: Tue, 28 Jul 2026 12:13:04 +0530 Subject: [PATCH 5/8] 1043289-empty commited From ff5f229a69622708b1e7a182f0e31a6cdcb39ecd Mon Sep 17 00:00:00 2001 From: Vellaisamy Auvudaiappan Date: Tue, 28 Jul 2026 12:43:39 +0530 Subject: [PATCH 6/8] 1043289-resolved ci issue trailing slash --- .../Word/Word-Processor/react/how-to/customize-tool-bar.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/react/how-to/customize-tool-bar.md b/Document-Processing/Word/Word-Processor/react/how-to/customize-tool-bar.md index 247b76c91c..ad735e6f48 100644 --- a/Document-Processing/Word/Word-Processor/react/how-to/customize-tool-bar.md +++ b/Document-Processing/Word/Word-Processor/react/how-to/customize-tool-bar.md @@ -14,9 +14,9 @@ domainurl: ##DomainURL## [React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) Container allows you to customize (add, show, hide, enable, and disable) existing items in a toolbar. -* Add - New items can be defined by [`CustomToolbarItemModel`](https://ej2.syncfusion.com/react/documentation/api/document-editor/customToolbarItemModel/) and with existing items in [`toolbarItems`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container#toolbaritems) property. Newly added item click action can be defined in [`toolbarClick`](https://ej2.syncfusion.com/react/documentation/api/toolbar/clickEventArgs/). +* Add - New items can be defined by [`CustomToolbarItemModel`](https://ej2.syncfusion.com/react/documentation/api/document-editor/customToolbarItemModel/) and with existing items in [`toolbarItems`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container#toolbaritems) property. Newly added item click action can be defined in [`toolbarClick`](https://ej2.syncfusion.com/react/documentation/api/toolbar/clickEventArgs). -* Show, Hide - Existing items can be shown or hidden using the [`toolbarItems`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container#toolbaritems) property. Pre-defined toolbar items are available with [`ToolbarItem`](https://ej2.syncfusion.com/react/documentation/api/document-editor/toolbarItem/). +* Show, Hide - Existing items can be shown or hidden using the [`toolbarItems`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container#toolbaritems) property. Pre-defined toolbar items are available with [`ToolbarItem`](https://ej2.syncfusion.com/react/documentation/api/document-editor/toolbarItem). * Enable, Disable - Toolbar items can be enabled or disabled using [`enableItems`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container/toolbar#enableItems) From c3368e8877e2aa4b27f5be9107471c7813cf39b7 Mon Sep 17 00:00:00 2001 From: Vellaisamy Auvudaiappan Date: Tue, 28 Jul 2026 13:37:53 +0530 Subject: [PATCH 7/8] 1043289-resolved ci issue --- .../react/how-to/customize-font-family-drop-down.md | 2 +- .../Word/Word-Processor/react/how-to/customize-tool-bar.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/react/how-to/customize-font-family-drop-down.md b/Document-Processing/Word/Word-Processor/react/how-to/customize-font-family-drop-down.md index 11b7f1695e..03e0e5c46f 100644 --- a/Document-Processing/Word/Word-Processor/react/how-to/customize-font-family-drop-down.md +++ b/Document-Processing/Word/Word-Processor/react/how-to/customize-font-family-drop-down.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Customize font family drop down in React Document Editor component -[React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) provides options to customize the font family drop-down list values using [`fontfamilies`](https://ej2.syncfusion.com/react/documentation/api/document-editor/documentEditorSettingsModel#fontfamilies) in Document editor settings. Fonts added in the `fontFamilies` of [`documentEditorSettings`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container#documenteditorsettings) will be displayed in the font drop-down list of the Text Properties pane and the Font dialog. +[React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) provides options to customize the font family drop-down list values using [`fontfamilies`](https://ej2.syncfusion.com/react/documentation/api/document-editor/documentEditorSettingsModel#fontfamilies) in Document editor settings. Fonts added in the fontFamilies of [`documentEditorSettings`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container#documenteditorsettings) will be displayed in the font drop-down list of the Text Properties pane and the Font dialog. Similarly, you can use [`documentEditorSettings`](https://ej2.syncfusion.com/react/documentation/api/document-editor#documenteditorsettings) property for DocumentEditor also. diff --git a/Document-Processing/Word/Word-Processor/react/how-to/customize-tool-bar.md b/Document-Processing/Word/Word-Processor/react/how-to/customize-tool-bar.md index ad735e6f48..dda5965db6 100644 --- a/Document-Processing/Word/Word-Processor/react/how-to/customize-tool-bar.md +++ b/Document-Processing/Word/Word-Processor/react/how-to/customize-tool-bar.md @@ -14,7 +14,7 @@ domainurl: ##DomainURL## [React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) Container allows you to customize (add, show, hide, enable, and disable) existing items in a toolbar. -* Add - New items can be defined by [`CustomToolbarItemModel`](https://ej2.syncfusion.com/react/documentation/api/document-editor/customToolbarItemModel/) and with existing items in [`toolbarItems`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container#toolbaritems) property. Newly added item click action can be defined in [`toolbarClick`](https://ej2.syncfusion.com/react/documentation/api/toolbar/clickEventArgs). +* Add - New items can be defined by [`CustomToolbarItemModel`](https://ej2.syncfusion.com/react/documentation/api/document-editor/customToolbarItemModel) and with existing items in [`toolbarItems`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container#toolbaritems) property. Newly added item click action can be defined in [`toolbarClick`](https://ej2.syncfusion.com/react/documentation/api/toolbar/clickEventArgs). * Show, Hide - Existing items can be shown or hidden using the [`toolbarItems`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container#toolbaritems) property. Pre-defined toolbar items are available with [`ToolbarItem`](https://ej2.syncfusion.com/react/documentation/api/document-editor/toolbarItem). From ef44fc7b5f06c0131aabca11916ed4e6d718288f Mon Sep 17 00:00:00 2001 From: Vellaisamy Auvudaiappan Date: Tue, 28 Jul 2026 13:57:06 +0530 Subject: [PATCH 8/8] 1043289-resolved spell check error --- .../react/how-to/customize-font-family-drop-down.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Document-Processing/Word/Word-Processor/react/how-to/customize-font-family-drop-down.md b/Document-Processing/Word/Word-Processor/react/how-to/customize-font-family-drop-down.md index 03e0e5c46f..93c0c30b08 100644 --- a/Document-Processing/Word/Word-Processor/react/how-to/customize-font-family-drop-down.md +++ b/Document-Processing/Word/Word-Processor/react/how-to/customize-font-family-drop-down.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Customize font family drop down in React Document Editor component -[React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) provides options to customize the font family drop-down list values using [`fontfamilies`](https://ej2.syncfusion.com/react/documentation/api/document-editor/documentEditorSettingsModel#fontfamilies) in Document editor settings. Fonts added in the fontFamilies of [`documentEditorSettings`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container#documenteditorsettings) will be displayed in the font drop-down list of the Text Properties pane and the Font dialog. +[React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) provides options to customize the font family drop-down list values using [`fontFamilies`](https://ej2.syncfusion.com/react/documentation/api/document-editor/documentEditorSettingsModel#fontfamilies) in Document editor settings. Fonts added in the fontFamilies of [`documentEditorSettings`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container#documenteditorsettings) will be displayed in the font drop-down list of the Text Properties pane and the Font dialog. Similarly, you can use [`documentEditorSettings`](https://ej2.syncfusion.com/react/documentation/api/document-editor#documenteditorsettings) property for DocumentEditor also.