From 4500c82e2b0a97e3f4f60fce86b1a1be630be759 Mon Sep 17 00:00:00 2001 From: Akshaya Arivoli Date: Thu, 12 Feb 2026 07:08:20 +0530 Subject: [PATCH 01/10] 1008846: ES code revamp --- .../how-to/customize-font-family-drop-down.md | 6 ++--- .../how-to/resize-document-editor.md | 23 ++++++++----------- .../set-default-format-in-document-editor.md | 22 ++++++++---------- 3 files changed, 22 insertions(+), 29 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-font-family-drop-down.md b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-font-family-drop-down.md index b11fd072d..8045eeb18 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-font-family-drop-down.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-font-family-drop-down.md @@ -16,14 +16,14 @@ Similarly, you can use [`documentEditorSettings`](https://ej2.syncfusion.com/jav The following example code illustrates how to change the font families in Document editor container. -```ts -let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true,height: '590px', +```js +var container = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true,height: '590px', // Add required font families to list it in font drop down documentEditorSettings: { fontFamilies: ['Algerian', 'Arial', 'Calibri', 'Windings'], } }); -DocumentEditorContainer.Inject(Toolbar); + ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar); container.serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'; container.appendTo('#container'); ``` diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/resize-document-editor.md b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/resize-document-editor.md index feed32f96..6c4375404 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/resize-document-editor.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/resize-document-editor.md @@ -18,8 +18,8 @@ DocumentEditorContainer initially render with default height. You can change hei The following example code illustrates how to change height of Document Editor. -```ts -let container: DocumentEditorContainer = new DocumentEditorContainer({ +```js +var container = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true, height: "590px" }); container.appendTo('#DocumentEditor'); @@ -33,9 +33,9 @@ DocumentEditorContainer initially render with default width. You can change widt The following example code illustrates how to change width of Document Editor. -```ts -let container: DocumentEditorContainer = new DocumentEditorContainer({ - enableToolbar: true, width: "100%" +```js +var container = new ej.documenteditor.DocumentEditorContainer({ + enableToolbar: true, width: "100%" }); container.appendTo('#DocumentEditor'); ``` @@ -48,18 +48,13 @@ Using [`resize`](https://ej2.syncfusion.com/javascript/documentation/api/documen The following example code illustrates how to fit Document Editor to browser window size. -```ts -import { - DocumentEditorContainer, - Toolbar, -} from '@syncfusion/ej2-documenteditor'; - -let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px' }); -DocumentEditorContainer.Inject(Toolbar); +```js +var container = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true, height: '590px' }); + ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar); container.serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'; -container.created = (): void => { +container.created = () => { setInterval(() => { updateDocumentEditorSize(); }, 100); diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/set-default-format-in-document-editor.md b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/set-default-format-in-document-editor.md index 4a57320d0..5ac1d5428 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/set-default-format-in-document-editor.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/set-default-format-in-document-editor.md @@ -63,14 +63,14 @@ You can use [`setDefaultParagraphFormat`](https://ej2.syncfusion.com/javascript/ The following example code illustrates how to change the paragraph format(before spacing, line spacing etc.,) default value in Document editor. -```ts +```js import { ParagraphFormatProperties, DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor'; -let container: DocumentEditorContainer = new DocumentEditorContainer({ height: "590px" }); +var container = new ej.documenteditor.DocumentEditorContainer({height: "590px" }); container.serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'; -DocumentEditorContainer.Inject(Toolbar); + ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar); -let defaultParagraphFormat: ParagraphFormatProperties = { +var defaultParagraphFormat = { beforeSpacing: 8, lineSpacing: 1.5, leftIndent: 24, @@ -88,26 +88,24 @@ You can use [`setDefaultSectionFormat`](https://ej2.syncfusion.com/javascript/do The following example code illustrates how to change the section format(header and footer distance, page width and height, etc.,) default value in Document editor. -```ts -import { SectionFormatProperties, DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor'; - -let container: DocumentEditorContainer = new DocumentEditorContainer({ height: "590px" }); +```js +var container = new ej.documenteditor.DocumentEditorContainer({height: "590px" }); container.serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'; -DocumentEditorContainer.Inject(Toolbar); + ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar); -let defaultSectionFormat: SectionFormatProperties = { +var defaultSectionFormat = { pageWidth: 500, pageHeight: 800, headerDistance: 56, footerDistance: 48, - leftMargin: 12, + leftMargin: 24, rightMargin: 12, topMargin: 0, bottomMargin: 0 }; container.setDefaultSectionFormat(defaultSectionFormat); -container.appendTo('#container'); +container.appendTo('#container'); ``` > 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. \ No newline at end of file From 55a81e5939c19f95a57cf627c09b702298e42499 Mon Sep 17 00:00:00 2001 From: Akshaya Arivoli Date: Thu, 12 Feb 2026 16:34:32 +0530 Subject: [PATCH 02/10] 1009393: Modified the code --- .../how-to/customize-color-picker.md | 4 +-- .../javascript-es5/how-to/customize-ribbon.md | 33 ++++++++----------- .../set-default-format-in-document-editor.md | 1 - 3 files changed, 15 insertions(+), 23 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-color-picker.md b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-color-picker.md index 9cf9362ff..b9f45c3da 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-color-picker.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-color-picker.md @@ -16,8 +16,8 @@ Similarly, you can use [`documentEditorSettings`](https://ej2.syncfusion.com/jav The following example code illustrates how to Customize the color picker in Document editor container. -```ts -let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true,height: '590px', +```js +var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true,height: '590px', //Customizing options for color picker. documentEditorSettings: { colorPickerSettings: { mode: 'Palette', modeSwitcher: true, showButtons: true }, diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-ribbon.md b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-ribbon.md index 84f36af4c..1388b6867 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-ribbon.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-ribbon.md @@ -27,9 +27,8 @@ Document Editor provides APIs to remove existing File menu items and add new cus In below code example, In the example below, the "Open" and "Export" items have been removed from the File Menu Items, and new custom items have been added. ```js -import { DocumentEditorContainer, Ribbon } from '@syncfusion/ej2-documenteditor'; -var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true, +var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer({ enabvaroolbar: true, toolbarMode: 'Ribbon', // Options: 'Ribbon' or 'Toolbar' ribbonLayout: 'Classic', // Options: 'Simplified' or 'Classic', fileMenuItems: ["New", "Print", { text: 'Export', id: 'custom_item',iconCss: 'e-icons e-export' } @@ -52,10 +51,8 @@ The Document Editor provides an [`backStageMenu`](https://ej2.syncfusion.com/jav The following code example shows how to add the backstage menu items. -```ts -import { DocumentEditorContainer, Ribbon } from '@syncfusion/ej2-documenteditor'; - -var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true, +```js +var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer({ enabvaroolbar: true, toolbarMode: 'Ribbon', // Options: 'Ribbon' or 'Toolbar' ribbonLayout: 'Classic', // Options: 'Simplified' or 'Classic', backstageMenu: { @@ -83,7 +80,7 @@ You can customize the ribbon tabs in the Document Editor by showing, hiding, or Document editor provides the [`showTab`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor-container/ribbon#showtab) API to show and hide the existing tab using existing `RibbonTabType` and `tabId`. The following code example how to show/hide existing tab using existing tab type and tab id. -```ts +```js // To hide the Home tab using the built-in `RibbonTabType` container.ribbon.showTab('Home', false); @@ -95,11 +92,9 @@ container.ribbon.showTab('custom_tab', false); The Document Editor provides the [`addTab`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor-container/ribbon#addtab) API, which allows you to insert a new custom tab either between existing tabs or at the end of the ribbon tabs. -```ts -import { RibbonTabModel } from '@syncfusion/ej2-ribbon'; - +```js // To add the tab at end of tab -let ribbonTab: RibbonTabModel = { +var ribbonTab = { header: 'Custom Tab', id: 'custom_tab', groups: [{ header: 'Custom Group', collections: [{ items: [{ @@ -132,7 +127,7 @@ Document Editor provides an [`showGroup`](https://ej2.syncfusion.com/javascript/ The following code example show how to show/hide the group using group Id or [`RibbonGroupInfo`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor-container#ribbongroupinfo). -```ts +```js // To hide the clipboard group using group index container.ribbon.showGroup({tabId: 'Home', index: 1} , false); @@ -149,12 +144,10 @@ container.ribbon.showGroup('custom_group', false); To extend the ribbon's functionality, you can add custom groups to any tab. This allows you to organize related commands together within a tab. -```ts - -import { RibbonGroupModel } from '@syncfusion/ej2-ribbon'; +```js // Add the new group at the end of the Home tab -let ribbonGroup: RibbonGroupModel = +var ribbonGroup = { header: 'Custom Group', collections: [{ items: [{ @@ -187,7 +180,7 @@ Using [`showItems`](https://ej2.syncfusion.com/javascript/documentation/api/docu The following code example show how to show/hide the item using item Id or [`RibbonItemInfo`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor-container#ribboniteminfo). -```ts +```js // To hide the Bold and Italic items using ribbon item information container.ribbon.showItems({ tabId: 'Home', groupIndex: 2, itemIndexes: [5, 6] } , false); @@ -202,7 +195,7 @@ container.ribbon.showItems('custom_item', false); Using [`enableItems`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor-container/ribbon#enableitems) API in Document editor ribbon to enable/disable the existing item. -```ts +```js // To disable the underline using ribbon item info container.ribbon.enableItems({ tabId: 'Home', groupIndex: 2, itemIndexes: [7] },false); @@ -218,10 +211,10 @@ container.ribbon.enableItems('custom_item', false); You can use the [`addItem`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor-container/ribbon#additem) API in the Document Editor ribbon to add a new item. Additionally, you can specify the target tab and group where the new item should be placed. -```ts +```js // To add the item at the end of the specified group (the item will be added at the end of the Undo group) -let ribbonItem: RibbonItemModel = { +var ribbonItem = { type: 'Button', buttonSettings: { content: 'New', diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/set-default-format-in-document-editor.md b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/set-default-format-in-document-editor.md index 5ac1d5428..7dc051575 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/set-default-format-in-document-editor.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/set-default-format-in-document-editor.md @@ -64,7 +64,6 @@ You can use [`setDefaultParagraphFormat`](https://ej2.syncfusion.com/javascript/ The following example code illustrates how to change the paragraph format(before spacing, line spacing etc.,) default value in Document editor. ```js -import { ParagraphFormatProperties, DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor'; var container = new ej.documenteditor.DocumentEditorContainer({height: "590px" }); container.serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'; From 31e8f025d2630e75369e3f9e96be7ab8c64ed587 Mon Sep 17 00:00:00 2001 From: Akshaya Arivoli Date: Thu, 12 Feb 2026 16:59:54 +0530 Subject: [PATCH 03/10] 1009393: Modified the code snippets --- .../how-to/change-document-view.md | 8 +- .../how-to/customize-context-menu.md | 87 +++++++++---------- .../how-to/customize-tool-bar.md | 18 ++-- ...oy-document-editor-component-for-mobile.md | 14 ++- .../disable-optimized-text-measuring.md | 15 ++-- .../how-to/open-document-by-address.md | 16 ++-- 6 files changed, 73 insertions(+), 85 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/change-document-view.md b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/change-document-view.md index 2d4731d79..ae389b167 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/change-document-view.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/change-document-view.md @@ -14,8 +14,8 @@ domainurl: ##DomainURL## DocumentEditor allows you to change the view to web layout and print using the [`layoutType`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#layouttype/) property with the supported [`LayoutType`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/layoutType/). -```ts -let docEdit: DocumentEditor = new DocumentEditor({ layoutType: 'Continuous'}); +```js +var docEdit = new ej.documenteditor.DocumentEditor({ layoutType: 'Continuous'}); ``` >Note: Default value of [`layoutType`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#layouttype/) in DocumentEditor component is [`Pages`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/layoutType/). @@ -24,8 +24,8 @@ let docEdit: DocumentEditor = new DocumentEditor({ layoutType: 'Continuous'}); DocumentEditorContainer component allows you to change the view to web layout and print using the [`layoutType`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#layouttype/) property with the supported [`LayoutType`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/layoutType/). -```ts -let container: DocumentEditorContainer = new DocumentEditorContainer({ layoutType: "Continuous" }); +```js +var container = new ej.documenteditor.DocumentEditorContainer({ layoutType: "Continuous" }); ``` >Note: Default value of [`layoutType`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#layouttype/) in DocumentEditorContainer component is [`Pages`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/layoutType/). \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-context-menu.md b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-context-menu.md index 00eaee8ea..4c25cdbc0 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-context-menu.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-context-menu.md @@ -18,28 +18,30 @@ Document Editor allows you to add custom option in context menu. It can be achie The following code shows how to add custom option in context menu. -```ts -let documentEditor: DocumentEditor = new DocumentEditor({ - isReadOnly: false, serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/' +```js +var documentEditor = new ej.documenteditor.DocumentEditor({ + isReadOnly: false, + serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/' }); documentEditor.enableAllModules(); documentEditor.appendTo('#DocumentEditor'); //Creating custom menu items -let menuItems: MenuItemModel[] = [ +var menuItems = [ { text: 'Search In Google', id: 'search_in_google', iconCss: 'e-icons e-de-ctnr-find' - }]; + } +]; //Adding custom options documentEditor.contextMenu.addCustomMenu(menuItems, false); //To handle contextmenu select event -documentEditor.customContextMenuSelect = (args: CustomContentMenuEventArgs): void => { - let item: string = args.id; - let id: string = documentEditor.element.id; +documentEditor.customContextMenuSelect = function (args) { + var item = args.id; + var id = documentEditor.element.id; switch (item) { case id + 'search_in_google': - let searchContent: string = documentEditor.selection.text; + var searchContent = documentEditor.selection.text; if (!documentEditor.selection.isEmpty && /\S/.test(searchContent)) { window.open('http://google.com/search?q=' + searchContent); } @@ -56,19 +58,21 @@ Document Editor allows you to customize the added custom option and also to hide The following code shows how to hide default context menu and add custom option in context menu. -```ts -let documentEditor: DocumentEditor = new DocumentEditor({ - isReadOnly: false, serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/' +```js +var documentEditor = new ej.documenteditor.DocumentEditor({ + isReadOnly: false, + serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/' }); documentEditor.enableAllModules(); documentEditor.appendTo('#DocumentEditor'); //Creating custom menu items -let menuItems: MenuItemModel[] = [ +var menuItems = [ { text: 'Search In Google', id: 'search_in_google', iconCss: 'e-icons e-de-ctnr-find' - }]; + } +]; //Adding custom options documentEditor.contextMenu.addCustomMenu(menuItems, true); ``` @@ -77,37 +81,38 @@ documentEditor.contextMenu.addCustomMenu(menuItems, true); The following code shows how to hide/show added custom option in context menu using the [`customContextMenuBeforeOpen`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/beforeOpenCloseCustomContentMenuEventArgs/). -```ts -let documentEditor: DocumentEditor = new DocumentEditor({ +```js +var documentEditor = new ej.documenteditor.DocumentEditor({ isReadOnly: false, serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/' }); documentEditor.enableAllModules(); documentEditor.appendTo('#DocumentEditor'); //Creating custom menu items -let menuItems: MenuItemModel[] = [ +var menuItems = [ { text: 'Search In Google', id: 'search_in_google', iconCss: 'e-icons e-de-ctnr-find' - }]; + } +]; //Adding custom options documentEditor.contextMenu.addCustomMenu(menuItems, false); //To show/hide custom menu item -documentEditor.customContextMenuBeforeOpen = (args: BeforeOpenCloseCustomContentMenuEventArgs): void => { - let search: HTMLElement = document.getElementById(args.ids[0]); +documentEditor.customContextMenuBeforeOpen = function (args) { + var search = document.getElementById(args.ids[0]); search.style.display = 'none'; - let searchContent: string = documentEditor.selection.text; + var searchContent = documentEditor.selection.text; if ((!documentEditor.selection.isEmpty) && (/\S/.test(searchContent))) { search.style.display = 'block'; } }; //To handle contextmenu select event -documentEditor.customContextMenuSelect = (args: CustomContentMenuEventArgs): void => { - let item: string = args.id; - let id: string = documentEditor.element.id; +documentEditor.customContextMenuSelect = function (args) { + var item = args.id; + var id = documentEditor.element.id; switch (item) { case id + 'search_in_google': - let searchContent: string = documentEditor.selection.text; + var searchContent = documentEditor.selection.text; if (!documentEditor.selection.isEmpty && /\S/.test(searchContent)) { window.open('http://google.com/search?q=' + searchContent); } @@ -135,18 +140,10 @@ Document Editor allows you to customize the Context Menu with sub-menu items. It The following code shows how to add a sub items in the custom option in context menu in Document Editor Container. -```ts -import { - DocumentEditorContainer, - Toolbar, -} from '@syncfusion/ej2-documenteditor'; -import { MenuItemModel } from '@syncfusion/ej2-navigations'; - -//Inject require modules. -DocumentEditorContainer.Inject(Toolbar); +```js // creating Custom Options -let menuItems: MenuItemModel[] = [ +var menuItems = [ { text: 'Form field', id: 'form field', @@ -155,25 +152,26 @@ let menuItems: MenuItemModel[] = [ { text: 'Text form', id: 'Text form', - iconCss: 'e-icons e-de-textform', + iconCss: 'e-icons e-de-textform' }, { text: 'Check box', id: 'Check box', - iconCss: 'e-icons e-de-checkbox-form', + iconCss: 'e-icons e-de-checkbox-form' }, { text: 'Drop down', id: 'Drop down', - iconCss: 'e-icons e-de-dropdownform', - }, - ], - }, + iconCss: 'e-icons e-de-dropdownform' + } + ] + } ]; + //Initialize Document Editor component. -let container: DocumentEditorContainer = new DocumentEditorContainer({ +var container = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true, - height: '590px', + height: '590px' }); //Open the default document in `created` event. @@ -181,8 +179,7 @@ container.created = function () { // adding Custom Options container.documentEditor.contextMenu.addCustomMenu(menuItems, false, true); }; + //Render Document Editor Container component. container.appendTo('#DocumentEditor'); - - ``` \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-tool-bar.md b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-tool-bar.md index 2d4dcb746..2f5d0bdd7 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-tool-bar.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-tool-bar.md @@ -20,21 +20,20 @@ DocumentEditorContainer allows you to customize(add, show, hide, enable, and dis * Enable, Disable - Toolbar items can be enabled or disable using [`enableItems`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor-container/toolbar/#enableItems) -```ts -let toolItem: CustomToolbarItemModel = { +```js +var toolItem = { prefixIcon: "e-de-ctnr-lock", tooltipText: "Disable Image", text: onWrapText("Disable Image"), id: "Custom" }; - //Initialize Document Editor Container component with custom toolbar item. -let container: DocumentEditorContainer = new DocumentEditorContainer({ +var container = new ej.documenteditor.DocumentEditorContainer({ toolbarItems: [toolItem, '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'] }); container.appendTo('#container'); //To handle custom toolbar click event. -container.toolbarClick = (args: ClickEventArgs): void => { +container.toolbarClick = function (args) { switch (args.item.id) { case 'Custom': //Disable image toolbar item. @@ -42,17 +41,14 @@ container.toolbarClick = (args: ClickEventArgs): void => { break; } }; - -function onWrapText(text: string): string { - let content: string = ''; - const index: number = text.lastIndexOf(' '); - +function onWrapText(text) { + var content = ''; + var index = text.lastIndexOf(' '); if (index !== -1) { content = text.slice(0, index) + "
" + text.slice(index + 1) + "
"; } else { content = text; } - return content; } ``` diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/deploy-document-editor-component-for-mobile.md b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/deploy-document-editor-component-for-mobile.md index 62806fead..c93e726e7 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/deploy-document-editor-component-for-mobile.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/deploy-document-editor-component-for-mobile.md @@ -18,31 +18,29 @@ Hence, it is recommended to switch the Document editor component as read-only in The following example code illustrates how to deploy Document Editor component for Mobile. -```ts +```js //Initialize Document Editor Container component. -import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor'; -DocumentEditorContainer.Inject(Toolbar); -let container: DocumentEditorContainer = new DocumentEditorContainer({ +var container = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true, height: '590px' }); container.serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'; container.appendTo('#DocumentEditor'); //To detect the device -let isMobileDevice: bool = /Android|Windows Phone|webOS/i.test(navigator.userAgent); +var isMobileDevice = /Android|Windows Phone|webOS/i.test(navigator.userAgent); -container.documentChange = () => { +container.documentChange = function () { if (isMobileDevice) { container.restrictEditing = true; - setTimeout(() => { + setTimeout(function () { container.documentEditor.fitPage("FitPageWidth"); }, 50); } else { container.restrictEditing = false; } -} +}; ``` > 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. diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/disable-optimized-text-measuring.md b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/disable-optimized-text-measuring.md index 228da0f98..0e3c8b1ed 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/disable-optimized-text-measuring.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/disable-optimized-text-measuring.md @@ -18,12 +18,12 @@ If you want the Document editor component to retain the document pagination (dis The following example code illustrates how to disable optimized text measuring improvement in `DocumentEditorContainer` instance. -```ts -import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor'; +```js -DocumentEditorContainer.Inject(Toolbar); - -let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px' }); +var container = new ej.documenteditor.DocumentEditorContainer({ + enableToolbar: true, + height: '590px' +}); // Disable optimized text measuring improvement container.documentEditorSettings = { enableOptimizedTextMeasuring: false }; @@ -37,10 +37,9 @@ container.appendTo('#container'); The following example code illustrates how to disable optimized text measuring improvement in `DocumentEditor` instance. -```ts -import { DocumentEditor } from '@syncfusion/ej2-documenteditor'; +```js -let documenteditor: DocumentEditor = new DocumentEditor({ isReadOnly: false, height: '370px', serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/' }); +var documenteditor = new ej.documenteditor.DocumentEditor({ isReadOnly: false, height: '370px', serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/' }); documenteditor.enableAllModules(); diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/open-document-by-address.md b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/open-document-by-address.md index 09b80da87..55247f04d 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/open-document-by-address.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/open-document-by-address.md @@ -16,20 +16,18 @@ In this article, we are going to see how to open a document from URL in Document please refer below example for client-side code -```ts +```js //Initialize Document Editor Container component. -let container: DocumentEditorContainer = new DocumentEditorContainer(); - +var container = new ej.documenteditor.DocumentEditorContainer(); container.appendTo('#DocumentEditorContainer'); - -document.getElementById('import').addEventListener('click', () => { - let http: XMLHttpRequest = new XMLHttpRequest(); +document.getElementById('import').addEventListener('click', function () { + var http = new XMLHttpRequest(); //add your url in which you want to open document inside the "" - let content = { fileUrl: "" }; - let baseurl: string = "/api/documenteditor/ImportFileURL"; + var content = { fileUrl: "" }; + var baseurl = "/api/documenteditor/ImportFileURL"; http.open("POST", baseurl, true); http.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); - http.onreadystatechange = () => { + http.onreadystatechange = function () { if (http.readyState === 4) { if (http.status === 200 || http.status === 304) { //open the SFDT text in Document Editor From c43198850154aa2da0739d9db88aea98e2225705 Mon Sep 17 00:00:00 2001 From: Sujitha Siva Date: Fri, 13 Feb 2026 10:58:47 +0530 Subject: [PATCH 04/10] 809971: JS5 documentation --- .../Word-Processor/javascript-es5/how-to/customize-tool-bar.md | 1 + 1 file changed, 1 insertion(+) diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-tool-bar.md b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-tool-bar.md index 2f5d0bdd7..4ba25c453 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-tool-bar.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-tool-bar.md @@ -21,6 +21,7 @@ DocumentEditorContainer allows you to customize(add, show, hide, enable, and dis * Enable, Disable - Toolbar items can be enabled or disable using [`enableItems`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor-container/toolbar/#enableItems) ```js + var toolItem = { prefixIcon: "e-de-ctnr-lock", tooltipText: "Disable Image", From 3add1f6aac3e877c6724f8d67372dbf41f521a6a Mon Sep 17 00:00:00 2001 From: Akshaya Arivoli Date: Fri, 13 Feb 2026 12:18:20 +0530 Subject: [PATCH 05/10] 1009393: Modified the code --- .../Word-Processor/javascript-es5/comments.md | 42 ++++++----- .../Word-Processor/javascript-es5/export.md | 54 +++++++-------- .../Word-Processor/javascript-es5/import.md | 69 +++++++++++-------- .../Word-Processor/javascript-es5/link.md | 45 ++++++------ .../saving-documents/server-side-export.md | 23 +++---- .../javascript-es5/section-format.md | 22 +++--- .../Word-Processor/javascript-es5/styles.md | 10 +-- .../javascript-es5/table-format.md | 62 ++++++++--------- .../javascript-es5/table-of-contents.md | 14 ++-- .../javascript-es5/text-format.md | 56 +++++++-------- 10 files changed, 203 insertions(+), 194 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/comments.md b/Document-Processing/Word/Word-Processor/javascript-es5/comments.md index 9ac9dc062..c1594b767 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/comments.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/comments.md @@ -16,7 +16,7 @@ Document Editor allows you to add comments to documents. You can add, navigate a Comments can be inserted to the selected text. -```ts +```js //Add new commnt in the document. documentEditor.editor.insertComment('Test comment'); ``` @@ -85,7 +85,7 @@ var commentInfo = container.documentEditor.getComments(); Next and previous comments can be navigated using the below code snippet. -```ts +```js //Navigate to next comment documentEditor.selection.navigateNextComment(); @@ -117,7 +117,7 @@ container.documentEditor.editor.deleteComment(commentinfo[0].replies[0].id); All the comments in the document can be deleted using the below code snippet. -```ts +```js //Delete all the comments present in the current document. documentEditor.editor.deleteAllComments(); ``` @@ -130,14 +130,14 @@ Document editor provides an option to protect and unprotect document using [`enf The following example code illustrates how to enforce and stop protection in Document editor container. -```ts -let container: DocumentEditorContainer = new DocumentEditorContainer({ +```js + +var container = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true, - height: '590px', + height: '590px' }); -DocumentEditorContainer.Inject(Toolbar); -container.serviceUrl = - 'http://localhost:5000/api/documenteditor/'; +ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar); +container.serviceUrl = 'http://localhost:5000/api/documenteditor/'; container.appendTo('#container'); //enforce protection @@ -145,6 +145,7 @@ container.documentEditor.editor.enforceProtection('123', 'CommentsOnly'); //stop the document protection container.documentEditor.editor.stopProtection('123'); + ``` Comment only protection can be enabled in UI by using [Restrict Editing pane](./document-management#restrict-editing-pane) @@ -159,21 +160,26 @@ Mention support displays a list of items that users can select or tag from the s The following example illustrates how to enable mention support in Document Editor -```ts -let mentionData: any = [ +```js +var mentionData = [ { "Name": "Mary Kate", "EmailId": "marry@company.com" }, { "Name": "Andrew James", "EmailId": "james@company.com" }, - { "Name": "Andrew Fuller", "EmailId": "andrew@company.com"} + { "Name": "Andrew Fuller", "EmailId": "andrew@company.com" } ]; -let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true,height: '590px', -// Enable mention support in document editor - documentEditorSettings: { - mentionSettings: { dataSource: mentionData, fields: { text: 'Name' }}, - } + +var container = new ej.documenteditor.DocumentEditorContainer({ + enableToolbar: true, + height: '590px', + // Enable mention support in document editor + documentEditorSettings: { + mentionSettings: { dataSource: mentionData, fields: { text: 'Name' } } + } }); -DocumentEditorContainer.Inject(Toolbar); + +ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar); container.serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'; container.appendTo('#container'); + ``` > 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. diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/export.md b/Document-Processing/Word/Word-Processor/javascript-es5/export.md index 3d1a18465..957543ddb 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/export.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/export.md @@ -131,23 +131,19 @@ The following example shows how to export document as text document (.txt). Document Editor also supports API to store the document into a blob. Refer to the following sample to export document into blob in client-side. -```ts -import { DocumentEditor, FormatType, WordExport, SfdtExport } from '@syncfusion/ej2-documenteditor'; +```js -//Inject require modules for Export. -DocumentEditor.Inject(WordExport, SfdtExport); - -let documenteditor: DocumentEditor = new DocumentEditor({ enableSfdtExport: true, enableWordExport: true, enableTextExport: true }); +var documenteditor = new ej.documenteditor.DocumentEditor({ enableSfdtExport: true, enableWordExport: true, enableTextExport: true }); documenteditor.appendTo('#DocumentEditor'); documenteditor.open(sfdt); -document.getElementById('export').addEventListener('click', () => { - //Export the current document as `Blob` object. - documenteditor.saveAsBlob('Docx').then((exportedDocument: Blob) => { - // The blob can be processed further - }); +document.getElementById('export').addEventListener('click', function () { + // Export the current document as `Blob` object. + documenteditor.saveAsBlob('Docx').then(function (exportedDocument) { + // The blob can be processed further + }); }); ``` @@ -173,57 +169,57 @@ For instance, to export the document as Rich Text Format file, implement an ASP. In client-side, you can consume this web service and save the document as Rich Text Format (.rtf) file. Refer to the following example. -```ts -document.getElementById('export').addEventListener('click', () => { - //Expor the document as `Blob` object. - documenteditor.saveAsBlob('Docx').then((exportedDocument: Blob) => { +```js +document.getElementById('export').addEventListener('click', function () { + // Expor the document as `Blob` object. + documenteditor.saveAsBlob('Docx').then(function (exportedDocument) { // The blob can be processed further - let formData: FormData = new FormData(); + var formData = new FormData(); formData.append('fileName', 'sample.docx'); formData.append('data', exportedDocument); saveAsRtf(formData); }); }); -function saveAsRtf(formData: FormData): void { - //Send the blob object to server to process further. - let httpRequest: XMLHttpRequest = new XMLHttpRequest(); +function saveAsRtf(formData) { + // Send the blob object to server to process further. + var httpRequest = new XMLHttpRequest(); httpRequest.open('POST', '/api/DocumentEditor/ExportAsRtf', true); - httpRequest.onreadystatechange = () => { + httpRequest.onreadystatechange = function () { if (httpRequest.readyState === 4) { if (httpRequest.status === 200 || httpRequest.status === 304) { if (!(!navigator.msSaveBlob)) { navigator.msSaveBlob(httpRequest.response, 'sample.rtf'); } else { - let downloadLink: HTMLAnchorElement = document.createElementNS('http://www.w3.org/1999/xhtml', 'a') as HTMLAnchorElement; + var downloadLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a'); download('sample.rtf', 'rtf', httpRequest.response, downloadLink, 'download' in downloadLink); } } else { console.error(httpRequest.response); } } - } + }; httpRequest.responseType = 'blob'; httpRequest.send(formData); } -//Download the document in client side. -function download(fileName: string, extension: string, buffer: Blob, downloadLink: HTMLAnchorElement, hasDownloadAttribute: Boolean): void { +// Download the document in client side. +function download(fileName, extension, buffer, downloadLink, hasDownloadAttribute) { if (hasDownloadAttribute) { downloadLink.download = fileName; - let dataUrl: string = window.URL.createObjectURL(buffer); + var dataUrl = window.URL.createObjectURL(buffer); downloadLink.href = dataUrl; - let event: MouseEvent = document.createEvent('MouseEvent'); + var event = document.createEvent('MouseEvent'); event.initEvent('click', true, true); downloadLink.dispatchEvent(event); - setTimeout((): void => { + setTimeout(function () { window.URL.revokeObjectURL(dataUrl); dataUrl = undefined; }); } else { if (extension !== 'docx' && extension !== 'xlsx') { - let url: string = window.URL.createObjectURL(buffer); - let isPopupBlocked: Window = window.open(url, '_blank'); + var url = window.URL.createObjectURL(buffer); + var isPopupBlocked = window.open(url, '_blank'); if (!isPopupBlocked) { window.location.href = url; } diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/import.md b/Document-Processing/Word/Word-Processor/javascript-es5/import.md index 31f3c9b1d..ae0b86213 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/import.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/import.md @@ -48,46 +48,55 @@ You can convert word documents into SFDT format using the .NET Standard library Please refer the following example for converting word documents into SFDT. -```ts -import { DocumentEditor } from '@syncfusion/ej2-documenteditor'; - +```js // Initialize the Document Editor component. -let documenteditor: DocumentEditor = new DocumentEditor(); - +var documenteditor = new ej.documenteditor.DocumentEditor(); documenteditor.appendTo('#DocumentEditor'); -document.getElementById('file_upload').setAttribute('accept', '.dotx,.docx,.docm,.dot,.doc,.rtf,.txt,.xml,.sfdt'); +// Limit accepted file types. +document.getElementById('file_upload').setAttribute( + 'accept', + '.dotx,.docx,.docm,.dot,.doc,.rtf,.txt,.xml,.sfdt' +); -//Open file picker. -document.getElementById("import").addEventListener("click", (): void => { - document.getElementById('file_upload').click(); +// Open file picker on button click. +document.getElementById('import').addEventListener('click', function () { + document.getElementById('file_upload').click(); }); -document.getElementById('file_upload').addEventListener("change", (e: any): void => { - if (e.target.files[0]) { - //Get the selected file. - let file = e.target.files[0]; - if (file.name.substr(file.name.lastIndexOf('.')) !== '.sfdt') { - loadFile(file); - } +// Handle file selection. +document.getElementById('file_upload').addEventListener('change', function (e) { + if (e.target.files && e.target.files[0]) { + var file = e.target.files[0]; + // If not already SFDT, send to server to convert. + if (file.name.substr(file.name.lastIndexOf('.')) !== '.sfdt') { + loadFile(file); + } else { + // If it's already SFDT, read and open directly. + var reader = new FileReader(); + reader.onload = function () { + documenteditor.open(reader.result); + }; + reader.readAsText(file); } + } }); -function loadFile(file: File): void { - let ajax: XMLHttpRequest = new XMLHttpRequest(); - ajax.open('POST', 'https://localhost:4000/api/documenteditor/Import', true); - ajax.onreadystatechange = () => { - if (ajax.readyState === 4) { - if (ajax.status === 200 || ajax.status === 304) { - //Open SFDT text in Document Editor - documenteditor.open(ajax.responseText); - } - } +// Send file to server to convert into SFDT and open the response. +function loadFile(file) { + var ajax = new XMLHttpRequest(); + ajax.open('POST', 'https://localhost:4000/api/documenteditor/Import', true); + ajax.onreadystatechange = function () { + if (ajax.readyState === 4) { + if (ajax.status === 200 || ajax.status === 304) { + // Open SFDT text in DocumentEditor. + documenteditor.open(ajax.responseText); + } } - let formData: FormData = new FormData(); - formData.append('files', file); - //Send the selected file to web api for converting it into sfdt. - ajax.send(formData); + }; + var formData = new FormData(); + formData.append('files', file); + ajax.send(formData); } ``` diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/link.md b/Document-Processing/Word/Word-Processor/javascript-es5/link.md index 30a103aa7..7233368b0 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/link.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/link.md @@ -35,37 +35,36 @@ The following example illustrates how to add requestNavigate event for DocumentE The following example illustrates how to add requestNavigate event for DocumentEditorContainer component. -```ts -import { DocumentEditor, SfdtExport, Selection, RequestNavigateEventArgs } from '@syncfusion/ej2-documenteditor'; +```js -let hostUrl: string = - 'https://document.syncfusion.com/web-services/word-editor/'; +var hostUrl = 'https://document.syncfusion.com/web-services/word-editor/'; -let container: DocumentEditorContainer = new DocumentEditorContainer({ - enableToolbar: true, - height: '590px', +var container = new ej.documenteditor.DocumentEditorContainer({ + enableToolbar: true, + height: '590px' }); -DocumentEditorContainer.Inject(Toolbar); + +ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar); + container.serviceUrl = hostUrl + 'api/documenteditor/'; container.appendTo('#container'); -// Add event listener for requestNavigate event to customize hyperlink navigation functionality -container.documentEditor.requestNavigate = (args: RequestNavigateEventArgs) => { - if (args.linkType !== 'Bookmark') { - let link: string = args.navigationLink; - if (args.localReference.length > 0) { - link += '#' + args.localReference; +container.documentEditor.requestNavigate = function (args) { + if (args.linkType !== 'Bookmark') { + var link = args.navigationLink; + if (args.localReference.length > 0) { + link += '#' + args.localReference; + } + window.open(link); + args.isHandled = true; } - //Navigate to the selected URL. - window.open(link); - args.isHandled = true; - } }; + ``` If the selection is in hyperlink, trigger this event by calling ‘navigateHyperlink’ method of ‘Selection’ instance. Refer to the following example. -```ts +```js documenteditor.selection.navigateHyperlink(); ``` @@ -73,7 +72,7 @@ documenteditor.selection.navigateHyperlink(); Document Editor copies link text of a hyperlink field to the clipboard if the selection is in hyperlink. Refer to the following example. -```ts +```js documenteditor.selection.copyHyperlink(); ``` @@ -104,7 +103,7 @@ Also Document Editor expose API [`insertHyperlink()`](https://ej2.syncfusion.com Refer to the following sample code. -```ts +```js documenteditor.editor.insertHyperlink('https://www.google.com', 'Google'); ``` @@ -112,7 +111,7 @@ documenteditor.editor.insertHyperlink('https://www.google.com', 'Google'); You can customize the screen tip text for the hyperlink by using below sample code. -```ts +```js documenteditor.editor.insertHyperlink('https://www.google.com', 'Google', '<>'); ``` @@ -124,7 +123,7 @@ Screen tip text can be modified through UI by using the [Hyperlink dialog](./dia To remove link from hyperlink in the document, press Backspace key at the end of a hyperlink. By removing the link, it will be converted as plain text. You can use ‘removeHyperlink’ method of ‘Editor’ instance if the selection is in hyperlink. Refer to the following example. -```ts +```js documenteditor.editor.removeHyperlink(); ``` diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/saving-documents/server-side-export.md b/Document-Processing/Word/Word-Processor/javascript-es5/saving-documents/server-side-export.md index ab8e77b3f..8c5ec1a6b 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/saving-documents/server-side-export.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/saving-documents/server-side-export.md @@ -40,30 +40,29 @@ Please refer the following code example. Please refer the client side example to serialize the sfdt and send to the server. -```ts -import { DocumentEditor, FormatType, WordExport, SfdtExport } from '@syncfusion/ej2-documenteditor'; +```js -//Inject require modules. -DocumentEditor.Inject(WordExport, SfdtExport); - -let documenteditor: DocumentEditor = new DocumentEditor({ enableSfdtExport: true, enableWordExport: true, enableTextExport: true }); +var documenteditor = new ej.documenteditor.DocumentEditor({ enableSfdtExport: true, enableWordExport: true, enableTextExport: true }); documenteditor.appendTo('#DocumentEditor'); -//Open the sfdt document. +// Open the SFDT document. documenteditor.open(sfdt); -document.getElementById('export').addEventListener('click', () => { - let http: XMLHttpRequest = new XMLHttpRequest(); +document.getElementById('export').addEventListener('click', function () { + var http = new XMLHttpRequest(); http.open('POST', 'http://localhost:5000/api/documenteditor/ExportSFDT'); http.setRequestHeader('Content-Type', 'application/json;charset=UTF-8'); http.responseType = 'json'; - //Serialize document content as SFDT. - let sfdt: any = { content: documenteditor.serialize() }; - //Send the sfdt content to server side. + + // Serialize document content as SFDT. + var sfdt = { content: documenteditor.serialize() }; + + // Send the SFDT content to server. http.send(JSON.stringify(sfdt)); }); + ``` > DocumentEditor object is available in DocumentEditorContainer component(DocumentEditor packaged with toolbar, statusbar & properties pane) as [`documentEditor`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#documenteditor) diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/section-format.md b/Document-Processing/Word/Word-Processor/javascript-es5/section-format.md index 320020da5..ac219e844 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/section-format.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/section-format.md @@ -16,7 +16,7 @@ Document Editor supports various section formatting such as page size, page marg You can get or set the size of a section at cursor position by using the following sample code. -```ts +```js documenteditor.selection.sectionFormat.pageWidth = 500; documenteditor.selection.sectionFormat.pageHeight = 600; ``` @@ -28,7 +28,7 @@ You can change the orientation of the page by swapping the values of page width Left and right page margin defines the gap between the document content from left and right side of the page respectively. Top and bottom page margins defines the gap between the document content from header and footer of the page respectively. Refer to the following sample code. -```ts +```js documenteditor.selection.sectionFormat.leftMargin = 10; documenteditor.selection.sectionFormat.rightMargin = 10; documenteditor.selection.sectionFormat.bottomMargin = 10; @@ -41,7 +41,7 @@ documenteditor.selection.sectionFormat.topMargin = 10; You can define the distance of header content from the top of the page by using the following sample code. -```ts +```js documenteditor.selection.sectionFormat.headerDistance = 72; ``` @@ -49,7 +49,7 @@ documenteditor.selection.sectionFormat.headerDistance = 72; You can define the distance of footer content from the bottom of the page by using the following sample code. -```ts +```js documenteditor.selection.sectionFormat.footerDistance = 72; ``` @@ -59,19 +59,19 @@ You can define the number of columns, column width, and space between columns fo The following code example illustrates how to define the two columns layout for the pages in a section. -```ts -let column: SelectionColumnFormat = new SelectionColumnFormat(container.documentEditor.selection); +```js +var column = new ej.documenteditor.SelectionColumnFormat(documenteditor.selection); column.width = 216; column.space = 36; -container.documentEditor.selection.sectionFormat.columns = [column, column]; -container.documentEditor.selection.sectionFormat.lineBetweenColumns = true; +documenteditor.selection.sectionFormat.columns = [column, column]; +documenteditor.selection.sectionFormat.lineBetweenColumns = true; ``` ## Breaks You can insert column break. The following code example illustrates how to insert a column break. -```ts +```js container.documentEditor.editor.insertColumnBreak(); ``` @@ -79,7 +79,7 @@ You can insert next page section break to start the new section on the next page The following code example illustrates how to insert a next page section break. -```ts +```js container.documentEditor.editor.insertSectionBreak(SectionBreakType.NewPage); ``` @@ -87,7 +87,7 @@ You can insert continuous section break to start the new section on the same pag The following code example illustrates how to insert a continuous section break. -```ts +```js container.documentEditor.editor.insertSectionBreak(SectionBreakType.Continuous); ``` diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/styles.md b/Document-Processing/Word/Word-Processor/javascript-es5/styles.md index 56527a2d6..8bfad2622 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/styles.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/styles.md @@ -197,11 +197,11 @@ editor.editorModule.applyStyle('New Linked', true); You can get the styles in the document using the below code snippet. -```ts +```js //Get paragraph styles -let paragraphStyles = documentEditor.getStyles('Paragraph'); +var paragraphStyles = documentEditor.getStyles('Paragraph'); //Get character styles -let paragraphStyles = documentEditor.getStyles('Character'); +var paragraphStyles = documentEditor.getStyles('Character'); ``` ## Modify an existing style @@ -210,8 +210,8 @@ You can modify a existing style with the specified style properties using [`crea The following illustrate to modify an existing style. -```ts -let styleJson: any = { +```js +var styleJson = { "type": "Paragraph", "name": "Heading 1", "characterFormat": { diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/table-format.md b/Document-Processing/Word/Word-Processor/javascript-es5/table-format.md index 203d0a640..fae032751 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/table-format.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/table-format.md @@ -16,7 +16,7 @@ Document Editor customizes the formatting of table, or table cells such as table You can customize the cell margins by using the following sample code. -```ts +```js //To change the left margin documenteditor.selection.cellFormat.leftMargin = 5.4; //To change the right margin @@ -29,7 +29,7 @@ documenteditor.selection.cellFormat.bottomMargin = 5.4; You can also define the default cell margins for a table. If the specific cell margin value is not defined explicitly in the cell formatting, the corresponding value will be retrieved from default cells margin of the table. Refer to the following sample code. -```ts +```js //To change the left margin documenteditor.selection.tableFormat.leftMargin = 5.4; //To change the right margin @@ -44,13 +44,13 @@ documenteditor.selection.tableFormat.bottomMargin = 5.4; You can explicitly set the background color of selected cells using the following sample code. -```ts +```js documenteditor.selection.cellFormat.background = '#E0E0E0'; ``` Refer to the following sample code to customize the background color of the table. -```ts +```js documenteditor.selection.tableFormat.background = '#E0E0E0'; ``` @@ -58,7 +58,7 @@ documenteditor.selection.tableFormat.background = '#E0E0E0'; Refer to the following sample code to customize the spacing between each cell in a table. -```ts +```js documenteditor.selection.tableFormat.cellSpacing = 2; ``` @@ -66,7 +66,7 @@ documenteditor.selection.tableFormat.cellSpacing = 2; The content is aligned within a table cell to ‘Top’, ‘Center’, or ‘Bottom’. You can customize this property of selected cells. Refer to the following sample code. -```ts +```js documenteditor.selection.cellFormat.verticalAlignment = 'Bottom'; ``` @@ -74,7 +74,7 @@ documenteditor.selection.cellFormat.verticalAlignment = 'Bottom'; The tables are aligned in Document Editor to ‘Left’, ‘Right’, or ‘Center’. Refer to the following sample code. -```ts +```js documenteditor.selection.tableFormat.tableAlignment = 'Center'; ``` @@ -82,37 +82,35 @@ documenteditor.selection.tableFormat.tableAlignment = 'Center'; Set the desired width of table cells that will be considered when the table is layouted. Refer to the following sample code. -```ts -import { DocumentEditor, Editor, Selection, SfdtExport } from '@syncfusion/ej2-documenteditor'; -//Inject the required module -DocumentEditor.Inject(Editor, Selection, SfdtExport); -let documenteditor: DocumentEditor = new DocumentEditor({ +```js + +var documenteditor = new ej.documenteditor.DocumentEditor({ isReadOnly: false, enableSelection: true, enableEditor: true, enableSfdtExport: true }); + documenteditor.appendTo('#DocumentEditor'); documenteditor.editor.insertTable(2, 2); //To change the width of a cell documenteditor.selection.cellFormat.preferredWidthType = 'Point'; documenteditor.selection.cellFormat.preferredWidth = 100; + ``` ## Table width You can set the desired width of a table in ‘Point ‘or ‘Percent’ type. Refer to the following sample code. -```ts -import { DocumentEditor, Editor, Selection, SfdtExport } from '@syncfusion/ej2-documenteditor'; -//Inject the required module -DocumentEditor.Inject(Editor, Selection, SfdtExport); -let documenteditor: DocumentEditor = new DocumentEditor({ +```js +var documenteditor = new ej.documenteditor.DocumentEditor({ isReadOnly: false, enableSelection: true, enableEditor: true, enableSfdtExport: true }); + documenteditor.appendTo('#DocumentEditor'); documenteditor.editor.insertTable(2, 2); //To change the width of a table @@ -124,24 +122,24 @@ documenteditor.selection.tableFormat.preferredWidth = 300; Document Editor exposes API to customize the borders for table cells by specifying the settings. Refer to the following sample code. -```ts -import { DocumentEditor, Editor, Selection, SfdtExport, BorderSettings } from '@syncfusion/ej2-documenteditor'; -//Inject the required module -DocumentEditor.Inject(Editor, Selection, SfdtExport); -let documenteditor: DocumentEditor = new DocumentEditor({ +```js + +var documenteditor = new ej.documenteditor.DocumentEditor({ isReadOnly: false, enableSelection: true, enableEditor: true, enableSfdtExport: true }); + documenteditor.appendTo('#DocumentEditor'); documenteditor.editor.insertTable(2, 2); //To apply border -let borderSettings: BorderSettings = { +var borderSettings = { type: 'AllBorders', lineWidth: 12 }; documenteditor.editor.applyBorders(borderSettings); + ``` Please check below gif which illustrates how to apply border for selected cells through properties pane options - border color, line size and no border: @@ -156,28 +154,28 @@ Document Editor allows various row formatting such as height and repeat header. You can customize the height of a table row as ‘Auto’, ‘AtLeast’, or ‘Exactly’. Refer to the following sample code. -```ts -import { DocumentEditor, Editor, Selection, SfdtExport } from '@syncfusion/ej2-documenteditor'; -//Inject the required module -DocumentEditor.Inject(Editor, Selection, SfdtExport); -let documenteditor: DocumentEditor = new DocumentEditor({ +```js + +var documenteditor = new ej.documenteditor.DocumentEditor({ isReadOnly: false, enableSelection: true, enableEditor: true, enableSfdtExport: true }); + documenteditor.appendTo('#DocumentEditor'); documenteditor.editor.insertTable(2, 2); //To change row height of first row documenteditor.selection.rowFormat.heightType = 'Exactly'; documenteditor.selection.rowFormat.height = 20; + ``` ### Header row The header row describes the content of a table. A table can optionally have a header row. Only the first row of a table can be the header row. If the cursor position is at first row of the table, then you can define whether it as header row or not, using the following sample code. -```ts +```js documenteditor.selection.rowFormat.isHeader = true; ``` @@ -185,7 +183,7 @@ documenteditor.selection.rowFormat.isHeader = true; This property is valid if a table row does not fit in the current page during table layout. It defines whether a table row can be allowed to break. If the value is false, the entire row will be moved to the start of next page. You can modify this property for selected rows using the following sample code. -```ts +```js documenteditor.selection.rowFormat.allowRowBreakAcrossPages = false; ``` @@ -193,7 +191,7 @@ documenteditor.selection.rowFormat.allowRowBreakAcrossPages = false; Document Editor expose API to get or set the table title of the selected table. Refer to the following sample code to set title. -```ts +```js documenteditor.selection.tableFormat.title = 'Shipping Details'; ``` @@ -201,7 +199,7 @@ documenteditor.selection.tableFormat.title = 'Shipping Details'; Document Editor expose API to get or set the table description of the selected image. Refer to the following sample code to set description. -```ts +```js documenteditor.selection.tableFormat.description = 'Freight cost and shipping details'; ``` diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/table-of-contents.md b/Document-Processing/Word/Word-Processor/javascript-es5/table-of-contents.md index 31e05cde7..bc28079d8 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/table-of-contents.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/table-of-contents.md @@ -27,13 +27,14 @@ Document Editor exposes an API to insert table of contents at cursor position pr The following code illustrates how to insert table of content in Document Editor. -```ts -let tocSettings: TableOfContentsSettings = +```js +var tocSettings = { startLevel: 1, endLevel: 3, includeHyperlink: true, includePageNumber: true, rightAlign: true }; //Insert table of contents in Document Editor. editor.editorModule.insertTableOfContents(tocSettings); + ``` {% tabs %} @@ -58,18 +59,19 @@ You can update or edit the table of contents using the built-in context menu sho You can also do it programmatically by using the exposed API. Refer to the following sample code. -```ts -let documentEditor: DocumentEditor = new DocumentEditor({ enableEditor: true, isReadOnly: false, enableSelection: true }); +```js + +var documentEditor = new ej.documenteditor.DocumentEditor({ enableEditor: true, isReadOnly: false, enableSelection: true }); documentEditor.appendTo('#DocumentEditor'); /*Open any existing document*/ documentEditor.open(''); //Table of contents settings. -let tocSettings: TableOfContentsSettings = -{ +var tocSettings = { startLevel: 1, endLevel: 3, includeHyperlink: true, includePageNumber: true, rightAlign: true }; //Insert table of contents in Document Editor. documentEditor.editorModule.insertTableOfContents(tocSettings); + ``` >Same method is used for inserting, updating, and editing table of contents. This will work based on the current element at cursor position and the optional settings parameter. If table of contents is present at cursor position, the update operation will be done based on the optional settings parameter. Otherwise, the insert operation will be done. diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/text-format.md b/Document-Processing/Word/Word-Processor/javascript-es5/text-format.md index 52134231d..9c29f3407 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/text-format.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/text-format.md @@ -16,10 +16,10 @@ Document Editor supports several formatting options for text like bold, italic, The bold formatting for selected text can be get or set by using the following sample code. -```ts +```js //Gets the value for bold formatting of selected text. -let bold : boolean = documenteditor.selection.characterFormat.bold; +let bold = documenteditor.selection.characterFormat.bold; //Sets bold formatting for selected text. documenteditor.selection.characterFormat.bold = true; @@ -27,7 +27,7 @@ documenteditor.selection.characterFormat.bold = true; You can toggle the bold formatting based on existing value at selection. Refer to the following sample code. -```ts +```js documenteditor.editor.toggleBold(); ``` @@ -35,16 +35,16 @@ documenteditor.editor.toggleBold(); The Italic formatting for selected text can be get or set by using the following sample code. -```ts +```js //Gets the value for italic formatting of selected text. -let italic : boolean = documenteditor.selection.characterFormat.italic; +var italic = documenteditor.selection.characterFormat.italic; //Sets italic formatting for selected text. documenteditor.selection.characterFormat.italic = true|false; ``` You can toggle the Italic formatting based on existing value at selection. Refer to the following sample code. -```ts +```js documenteditor.editor.toggleItalic(); ``` @@ -52,16 +52,16 @@ documenteditor.editor.toggleItalic(); The underline style for selected text can be get or set by using the following sample code. -```ts +```js //Gets the value for underline formatting of selected text. -let underline : Underline = documenteditor.selection.characterFormat.underline; +var underline = documenteditor.selection.characterFormat.underline; //Sets underline formatting for selected text. documenteditor.selection.characterFormat.underline = 'Single' | 'None'; ``` You can toggle the underline style of selected text based on existing value at selection by specifying a value. Refer to the following sample code. -```ts +```js documenteditor.editor.toggleUnderline('Single'); ``` @@ -69,16 +69,16 @@ documenteditor.editor.toggleUnderline('Single'); The strikethrough style for selected text can be get or set by using the following sample code. -```ts +```js //Gets the value for strikethrough formatting of selected text. -let strikethrough : Strikethrough = documenteditor.selection.characterFormat.strikethrough; +var strikethrough = documenteditor.selection.characterFormat.strikethrough; //Sets strikethrough formatting for selected text. documenteditor.selection.characterFormat.strikethrough = 'Single' | 'Normal'; ``` You can toggle the strikethrough style of selected text based on existing value at selection by specifying a value. Refer to the following sample code. -```ts +```js documenteditor.editor.toggleStrikethrough(); ``` @@ -86,16 +86,16 @@ documenteditor.editor.toggleStrikethrough(); The selected text can be made superscript by using the following sample code. -```ts +```js //Gets the value for baselineAlignment formatting of selected text. -let baselineAlignment : BaselineAlignment = documenteditor.selection.characterFormat.baselineAlignment; +var baselineAlignment = documenteditor.selection.characterFormat.baselineAlignment; //Sets baselineAlignment formatting for selected text. documenteditor.selection.characterFormat.baselineAlignment = 'Superscript'; ``` Toggle the selected text as superscript or normal using the following sample code. -```ts +```js documenteditor.editor.toggleSuperscript(); ``` @@ -103,22 +103,22 @@ documenteditor.editor.toggleSuperscript(); The selected text can be made subscript by using the following sample code. -```ts +```js //Gets the value for baselineAlignment formatting of selected text. -let baselineAlignment : BaselineAlignment = documenteditor.selection.characterFormat.baselineAlignment; +var baselineAlignment = documenteditor.selection.characterFormat.baselineAlignment; //Sets baselineAlignment formatting for selected text. documenteditor.selection.characterFormat.baselineAlignment = 'Subscript'; ``` Toggle the selected text as subscript or normal using the following sample code. -```ts +```js documenteditor.editor.toggleSubscript(); ``` You can make a subscript or superscript text as normal using the following code. -```ts +```js documenteditor.selection.characterFormat.baselineAlignment = 'Normal'; ``` @@ -126,7 +126,7 @@ documenteditor.selection.characterFormat.baselineAlignment = 'Normal'; You can apply different case formatting based on the selected text. Refer to the following sample code. -```ts +```js documenteditor.editor.changeCase('Uppercase'|'Lowercase'|'SentenceCase'|'ToggleCase'|'CapitalizeEachWord'); ``` @@ -134,9 +134,9 @@ documenteditor.editor.changeCase('Uppercase'|'Lowercase'|'SentenceCase'|'ToggleC The size of selected text can be get or set using the following code. -```ts +```js //Gets the value for fontSize formatting of selected text. -let fontSize : number = documenteditor.selection.characterFormat.fontSize; +var fontSize = documenteditor.selection.characterFormat.fontSize; //Sets fontSize formatting for selected text. documenteditor.selection.characterFormat.fontSize = 32; ``` @@ -158,9 +158,9 @@ This Font Color option appear as follows. The color of selected text can be get or set using the following code. -```ts +```js //Gets the value for fontColor formatting of selected text. -let fontColor : string = documenteditor.selection.characterFormat.fontColor; +var fontColor = documenteditor.selection.characterFormat.fontColor; //Sets fontColor formatting for selected text. documenteditor.selection.characterFormat.fontColor = 'Pink'; documenteditor.selection.characterFormat.fontColor = '#FFC0CB'; @@ -170,9 +170,9 @@ documenteditor.selection.characterFormat.fontColor = '#FFC0CB'; The font style of selected text can be get or set using the following sample code. -```ts +```js //Gets the value for fontFamily formatting of selected text. -let baselineAlignment : string = documenteditor.selection.characterFormat.fontFamily; +var baselineAlignment = documenteditor.selection.characterFormat.fontFamily; //Sets fontFamily formatting for selected text. documenteditor.selection.characterFormat.fontFamily = 'Arial'; ``` @@ -181,9 +181,9 @@ documenteditor.selection.characterFormat.fontFamily = 'Arial'; The highlight color of the selected text can be get or set using the following sample code. -```ts +```js //Gets the value for highlightColor formatting of selected text. -let highlightColor : HighlightColor = documenteditor.selection.characterFormat.highlightColor; +var highlightColor = documenteditor.selection.characterFormat.highlightColor; //Sets highlightColor formatting for selected text. documenteditor.selection.characterFormat.highlightColor = 'Pink'; ``` From 74792b34b38fcc6a6ca3dc94c0225dd71a29f6f4 Mon Sep 17 00:00:00 2001 From: Sujitha Siva Date: Fri, 13 Feb 2026 15:07:06 +0530 Subject: [PATCH 06/10] 809971: JS5 Documentation --- Document-Processing/Word/Word-Processor/javascript-es5/export.md | 1 - 1 file changed, 1 deletion(-) diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/export.md b/Document-Processing/Word/Word-Processor/javascript-es5/export.md index 957543ddb..64af34475 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/export.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/export.md @@ -145,7 +145,6 @@ document.getElementById('export').addEventListener('click', function () { // The blob can be processed further }); }); - ``` For instance, to export the document as Rich Text Format file, implement an ASP.NET MVC web API controller using DocIO library by passing the DOCX blob. Refer to the following code example. From bc26a3ca51cae585794adc89a0eb4a9cb7577156 Mon Sep 17 00:00:00 2001 From: Sujitha Siva Date: Fri, 13 Feb 2026 20:21:00 +0530 Subject: [PATCH 07/10] 809971: Resolve CI failure --- .../Word/Word-Processor/javascript-es5/comments.md | 10 +++++----- .../javascript-es5/how-to/change-document-view.md | 10 +++++----- .../javascript-es5/how-to/customize-color-picker.md | 6 +++--- .../javascript-es5/how-to/customize-context-menu.md | 6 +++--- .../how-to/customize-font-family-drop-down.md | 6 +++--- .../javascript-es5/how-to/customize-tool-bar.md | 6 +++--- .../deploy-document-editor-component-for-mobile.md | 6 +++--- .../how-to/disable-optimized-text-measuring.md | 4 ++-- .../javascript-es5/how-to/open-document-by-address.md | 2 +- .../javascript-es5/how-to/resize-document-editor.md | 6 +++--- .../how-to/set-default-format-in-document-editor.md | 4 ++-- .../Word/Word-Processor/javascript-es5/link.md | 2 +- .../saving-documents/server-side-export.md | 4 ++-- .../Word-Processor/javascript-es5/section-format.md | 2 +- .../Word/Word-Processor/javascript-es5/styles.md | 2 +- .../Word-Processor/javascript-es5/table-of-contents.md | 4 ++-- 16 files changed, 40 insertions(+), 40 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/comments.md b/Document-Processing/Word/Word-Processor/javascript-es5/comments.md index c1594b767..9c29acb34 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/comments.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/comments.md @@ -47,7 +47,7 @@ documentEditor.editor.insertComment('Hello world', commentProperties); ## Add a Reply Comment with Date, Author, and Status -Reply comments can be inserted into the parent comment with a specified date, author using [`insertReplyComment`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#insertreplycomment/). +Reply comments can be inserted into the parent comment with a specified date, author using [`insertReplyComment`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#insertreplycomment). {% highlight js %} // In this example, a comment with the text "Hello world" @@ -73,7 +73,7 @@ documentEditor.editor.insertReplyComment(comment.id, 'Hello world', commentPrope ## Get Comments -Document Editor allows to get the comments along with its reply and comment properties using [`getComments`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#getComments/). +Document Editor allows to get the comments along with its reply and comment properties using [`getComments`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#getComments). {% highlight js %} //Get Comments in the document along with the properties author, date, status. @@ -96,7 +96,7 @@ documentEditor.selection.navigatePreviousComment(); ## Delete comment -Current comment can be be deleted using [`deleteComment`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#deletecomment/). +Current comment can be be deleted using [`deleteComment`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#deletecomment). {% highlight js %} @@ -126,7 +126,7 @@ documentEditor.editor.deleteAllComments(); Document Editor provides support for protecting the document with `CommentsOnly` protection. In this protection, user allowed to add or edit comments alone in the document. -Document editor provides an option to protect and unprotect document using [`enforceProtection`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#enforceprotection/) and [`stopProtection`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#stopprotection/) API. +Document editor provides an option to protect and unprotect document using [`enforceProtection`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#enforceprotection) and [`stopProtection`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#stopprotection) API. The following example code illustrates how to enforce and stop protection in Document editor container. @@ -186,7 +186,7 @@ container.appendTo('#container'); ## Events -DocumentEditor provides [beforeCommentAction](https://ej2.syncfusion.com/javascript/documentation/api/document-editor-container#beforecommentaction/) event, which is triggered on comment actions like Post, edit, reply, resolve and reopen. This event provides an opportunity to perform custom logic on comment actions like Post, edit, reply, resolve and reopen. The event handler receives the [CommentActionEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/commentActionEventArgs/) object as an argument, which allows access to information about the comment. +DocumentEditor provides [beforeCommentAction](https://ej2.syncfusion.com/javascript/documentation/api/document-editor-container#beforecommentaction) event, which is triggered on comment actions like Post, edit, reply, resolve and reopen. This event provides an opportunity to perform custom logic on comment actions like Post, edit, reply, resolve and reopen. The event handler receives the [CommentActionEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/commentActionEventArgs) object as an argument, which allows access to information about the comment. To demonstrate a specific use case, let’s consider an example where we want to restrict the delete functionality based on the author’s name. The following code snippet illustrates how to allow only the author of a comment to delete: diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/change-document-view.md b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/change-document-view.md index ae389b167..38685524b 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/change-document-view.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/change-document-view.md @@ -1,6 +1,6 @@ --- layout: post -title: Change document view in JavaScript (ES5) Document editor control | Syncfusion +title: Change document view in JavaScript (ES5) Document editor | Syncfusion description: Learn here all about Change document view in Syncfusion JavaScript (ES5) Document editor control of Syncfusion Essential JS 2 and more. platform: document-processing control: Change document view @@ -12,20 +12,20 @@ domainurl: ##DomainURL## ## How to change the document view in DocumentEditor component -DocumentEditor allows you to change the view to web layout and print using the [`layoutType`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#layouttype/) property with the supported [`LayoutType`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/layoutType/). +DocumentEditor allows you to change the view to web layout and print using the [`layoutType`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#layouttype) property with the supported [`LayoutType`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/layoutType). ```js var docEdit = new ej.documenteditor.DocumentEditor({ layoutType: 'Continuous'}); ``` ->Note: Default value of [`layoutType`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#layouttype/) in DocumentEditor component is [`Pages`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/layoutType/). +>Note: Default value of [`layoutType`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#layouttype) in DocumentEditor component is [`Pages`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/layoutType). ## How to change the document view in DocumentEditorContainer component -DocumentEditorContainer component allows you to change the view to web layout and print using the [`layoutType`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#layouttype/) property with the supported [`LayoutType`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/layoutType/). +DocumentEditorContainer component allows you to change the view to web layout and print using the [`layoutType`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#layouttype) property with the supported [`LayoutType`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/layoutType). ```js var container = new ej.documenteditor.DocumentEditorContainer({ layoutType: "Continuous" }); ``` ->Note: Default value of [`layoutType`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#layouttype/) in DocumentEditorContainer component is [`Pages`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/layoutType/). \ No newline at end of file +>Note: Default value of [`layoutType`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#layouttype) in DocumentEditorContainer component is [`Pages`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/layoutType). \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-color-picker.md b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-color-picker.md index b9f45c3da..6b63ae841 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-color-picker.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-color-picker.md @@ -1,6 +1,6 @@ --- layout: post -title: Customize color picker in JavaScript (ES5) Document editor control | Syncfusion +title: Customize color picker in JavaScript(ES5) Document Editor | Syncfusion description: Learn here all about Customize color picker in Syncfusion JavaScript (ES5) Document editor control of Syncfusion Essential JS 2 and more. platform: document-processing control: Customize Color Picker @@ -10,9 +10,9 @@ domainurl: ##DomainURL## # Customize color picker in JavaScript (ES5) Document editor control -Document editor provides an options to customize the color picker using [`colorPickerSettings`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/documentEditorSettingsModel#colorpickersettings/) in Document editor settings. The color picker offers customization options for default appearance, by allowing selection between Picker or Palette mode, for font and border colors." +Document editor provides an options to customize the color picker using [`colorPickerSettings`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/documentEditorSettingsModel#colorpickersettings) in Document editor settings. The color picker offers customization options for default appearance, by allowing selection between Picker or Palette mode, for font and border colors." -Similarly, you can use [`documentEditorSettings`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#documenteditorsettings/) property for DocumentEditor also. +Similarly, you can use [`documentEditorSettings`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#documenteditorsettings) property for DocumentEditor also. The following example code illustrates how to Customize the color picker in Document editor container. diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-context-menu.md b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-context-menu.md index 4c25cdbc0..2938f143a 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-context-menu.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-context-menu.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## ## How to customize context menu in Document Editor -Document Editor allows you to add custom option in context menu. It can be achieved by using the [`addCustomMenu()`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/contextMenu/#addcustommenu/) method and custom action is defined using the [`customContextMenuSelect`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/customContentMenuEventArgs/) +Document Editor allows you to add custom option in context menu. It can be achieved by using the [`addCustomMenu()`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/contextMenu/#addcustommenu) method and custom action is defined using the [`customContextMenuSelect`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/customContentMenuEventArgs) ### Add Custom Option @@ -79,7 +79,7 @@ documentEditor.contextMenu.addCustomMenu(menuItems, true); #### Customize added context menu items -The following code shows how to hide/show added custom option in context menu using the [`customContextMenuBeforeOpen`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/beforeOpenCloseCustomContentMenuEventArgs/). +The following code shows how to hide/show added custom option in context menu using the [`customContextMenuBeforeOpen`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/beforeOpenCloseCustomContentMenuEventArgs). ```js var documentEditor = new ej.documenteditor.DocumentEditor({ @@ -136,7 +136,7 @@ The following is the output of custom context menu with customization. #### Customize Context Menu with sub-menu items -Document Editor allows you to customize the Context Menu with sub-menu items. It can be achieved by using the [`addCustomMenu()`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/contextMenu/#addcustommenu/) method. +Document Editor allows you to customize the Context Menu with sub-menu items. It can be achieved by using the [`addCustomMenu()`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/contextMenu/#addcustommenu) method. The following code shows how to add a sub items in the custom option in context menu in Document Editor Container. diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-font-family-drop-down.md b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-font-family-drop-down.md index 8045eeb18..cf5c14419 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-font-family-drop-down.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-font-family-drop-down.md @@ -1,6 +1,6 @@ --- layout: post -title: Customize font family drop down in JavaScript (ES5) Document editor control | Syncfusion +title: Customize font drop down in JavaScript (ES5) Docx Editor | Syncfusion description: Learn here all about Customize font family drop down in Syncfusion JavaScript (ES5) Document editor control of Syncfusion Essential JS 2 and more. platform: document-processing control: Customize font family drop down @@ -8,9 +8,9 @@ documentation: ug domainurl: ##DomainURL## --- -# Customize font family drop down in JavaScript (ES5) Document editor control +# Customize font family drop down in JavaScript (ES5) Document editor -Document editor provides an options to customize the font family drop down list values using [`fontfamilies`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/documentEditorSettingsModel#fontfamilies) in Document editor settings. Fonts which are added in fontFamilies of [`documentEditorSettings`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#documenteditorsettings) will be displayed on font drop down list of text properties pane and font dialog. +Document editor provides an options to customize the font family drop down list values using [`fontFamilies`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/documentEditorSettingsModel#fontfamilies) in Document editor settings. Fonts which are added in fontFamilies of [`documentEditorSettings`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#documenteditorsettings) will be displayed on font drop down list of text properties pane and font dialog. Similarly, you can use [`documentEditorSettings`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#documenteditorsettings) property for DocumentEditor also. diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-tool-bar.md b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-tool-bar.md index 4ba25c453..145e10839 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-tool-bar.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-tool-bar.md @@ -1,6 +1,6 @@ --- layout: post -title: Customize tool bar in JavaScript (ES5) Document editor control | Syncfusion +title: Customize tool bar in JavaScript (ES5) Document editor | Syncfusion description: Learn here all about Customize tool bar in Syncfusion JavaScript (ES5) Document editor control of Syncfusion Essential JS 2 and more. platform: document-processing control: Customize tool bar @@ -14,9 +14,9 @@ domainurl: ##DomainURL## DocumentEditorContainer 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/javascript/documentation/api/document-editor/customToolbarItemModel/) and with existing items in [`toolbarItems`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#toolbaritems) property. Newly added item click action can be defined in [`toolbarClick`](https://ej2.syncfusion.com/javascript/documentation/api/toolbar/clickEventArgs/). +* Add - New items can defined by [`CustomToolbarItemModel`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/customToolbarItemModel) and with existing items in [`toolbarItems`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#toolbaritems) property. Newly added item click action can be defined in [`toolbarClick`](https://ej2.syncfusion.com/javascript/documentation/api/toolbar/clickEventArgs). -* Show, Hide - Existing items can be shown or hidden using the [`toolbarItems`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#toolbaritems) property. Pre-defined toolbar items are available with [`ToolbarItem`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/toolbarItem/). +* Show, Hide - Existing items can be shown or hidden using the [`toolbarItems`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#toolbaritems) property. Pre-defined toolbar items are available with [`ToolbarItem`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/toolbarItem). * Enable, Disable - Toolbar items can be enabled or disable using [`enableItems`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor-container/toolbar/#enableItems) diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/deploy-document-editor-component-for-mobile.md b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/deploy-document-editor-component-for-mobile.md index c93e726e7..c1e6cb77d 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/deploy-document-editor-component-for-mobile.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/deploy-document-editor-component-for-mobile.md @@ -1,6 +1,6 @@ --- layout: post -title: Deploy document editor component for mobile in JavaScript (ES5) Document editor control | Syncfusion +title: Deploy Docx editor for mobile in JavaScript (ES5) Docx Editor | Syncfusion description: Learn here all about Deploy document editor component for mobile in Syncfusion JavaScript (ES5) Document editor control of Syncfusion Essential JS 2 and more. platform: document-processing control: Deploy document editor component for mobile @@ -8,13 +8,13 @@ documentation: ug domainurl: ##DomainURL## --- -# Deploy document editor component for mobile in JavaScript (ES5) Document editor control +# Deploy Docx editor component for mobile in JavaScript(ES5) Docx editor ## Document editor component for Mobile At present, Document editor component is not responsive for mobile, and we haven't ensured the editing functionalities in mobile browsers. Whereas it works properly as a document viewer in mobile browsers. -Hence, it is recommended to switch the Document editor component as read-only in mobile browsers. Also, invoke [`fitPage`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#fitpage) method with [`FitPageWidth`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/pageFitType/) parameter in document change event, such as to display one full page by adjusting the zoom factor. +Hence, it is recommended to switch the Document editor component as read-only in mobile browsers. Also, invoke [`fitPage`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#fitpage) method with [`FitPageWidth`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/pageFitType) parameter in document change event, such as to display one full page by adjusting the zoom factor. The following example code illustrates how to deploy Document Editor component for Mobile. diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/disable-optimized-text-measuring.md b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/disable-optimized-text-measuring.md index 0e3c8b1ed..7a2bf6e1c 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/disable-optimized-text-measuring.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/disable-optimized-text-measuring.md @@ -1,6 +1,6 @@ --- layout: post -title: Disable optimized text measuring in JavaScript (ES5) Document editor control | Syncfusion +title: Disable optimized text measuring in JavaScript (ES5) docx Editor | Syncfusion description: Learn here all about Disable optimized text measuring in Syncfusion JavaScript (ES5) Document editor control of Syncfusion Essential JS 2 and more. platform: document-processing control: Disable optimized text measuring @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Disable optimized text measuring in JavaScript (ES5) Document editor control +# Disable optimized text measuring in JavaScript (ES5) Document editor Starting from v19.3.0.x, the accuracy of text size measurements in Document editor is improved such as to match Microsoft Word pagination for most Word documents. This improvement is included as default behavior along with an optional API [`enableOptimizedTextMeasuring`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/documentEditorSettingsModel#enableoptimizedtextmeasuring) in Document editor settings. diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/open-document-by-address.md b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/open-document-by-address.md index 55247f04d..cd0c0efc0 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/open-document-by-address.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/open-document-by-address.md @@ -1,6 +1,6 @@ --- layout: post -title: Open document by address in JavaScript (ES5) Document editor control | Syncfusion +title: Open document by address in JavaScript (ES5) Docx editor | Syncfusion description: Learn here all about Open document by address in Syncfusion JavaScript (ES5) Document editor control of Syncfusion Essential JS 2 and more. platform: document-processing control: Open document by address diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/resize-document-editor.md b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/resize-document-editor.md index 6c4375404..884536a5d 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/resize-document-editor.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/resize-document-editor.md @@ -1,6 +1,6 @@ --- layout: post -title: Resize document editor in JavaScript (ES5) Document editor control | Syncfusion +title: Resize document editor in JavaScript (ES5) Docx editor | Syncfusion description: Learn here all about Resize document editor in Syncfusion JavaScript (ES5) Document editor control of Syncfusion Essential JS 2 and more. platform: document-processing control: Resize document editor @@ -14,7 +14,7 @@ In this article, we are going to see how to change height and width of Document ## Change height of Document Editor -DocumentEditorContainer initially render with default height. You can change height of documenteditor using [`height`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor-container/documentEditorContainerModel/#height) property, the value which is in pixel. +DocumentEditorContainer initially render with default height. You can change height of documenteditor using [`height`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor-container/documentEditorContainerModel#height) property, the value which is in pixel. The following example code illustrates how to change height of Document Editor. @@ -29,7 +29,7 @@ Similarly, you can use [`height`](https://ej2.syncfusion.com/javascript/document ## Change width of Document Editor -DocumentEditorContainer initially render with default width. You can change width of documenteditor using [`width`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor-container/documenteditorcontainermodel/#width) property, the value which is in percent. +DocumentEditorContainer initially render with default width. You can change width of documenteditor using [`width`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor-container/documenteditorcontainermodel#width) property, the value which is in percent. The following example code illustrates how to change width of Document Editor. diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/set-default-format-in-document-editor.md b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/set-default-format-in-document-editor.md index 7dc051575..31872fa16 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/set-default-format-in-document-editor.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/set-default-format-in-document-editor.md @@ -1,6 +1,6 @@ --- layout: post -title: Set default format in document editor in JavaScript (ES5) Document editor control | Syncfusion +title: Set default format in Docx editor in JavaScript (ES5) Docx Editor | Syncfusion description: Learn here all about Set default format in document editor in Syncfusion JavaScript (ES5) Document editor control of Syncfusion Essential JS 2 and more. platform: document-processing control: Set default format in document editor @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Set default format in document editor in JavaScript (ES5) Document editor control +# Set default format in document editor in JavaScript (ES5) Docx editor You can set the default character format, paragraph format and section format in Document editor. diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/link.md b/Document-Processing/Word/Word-Processor/javascript-es5/link.md index 7233368b0..95e379e23 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/link.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/link.md @@ -99,7 +99,7 @@ Refer to the following example. {% previewsample "/document-processing/code-snippet/document-editor/javascript-es5/hyperlink-cs2" %} -Also Document Editor expose API [`insertHyperlink()`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor/#inserthyperlink)to insert hyperlink. +Also Document Editor expose API [`insertHyperlink()`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#inserthyperlink)to insert hyperlink. Refer to the following sample code. diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/saving-documents/server-side-export.md b/Document-Processing/Word/Word-Processor/javascript-es5/saving-documents/server-side-export.md index 8c5ec1a6b..571dcd107 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/saving-documents/server-side-export.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/saving-documents/server-side-export.md @@ -1,6 +1,6 @@ --- layout: post -title: Server side export in JavaScript (ES5) Document editor control | Syncfusion +title: Server side export in JavaScript (ES5) Document editor | Syncfusion description: Learn here all about Server side export in Syncfusion JavaScript (ES5) Document editor control of Syncfusion Essential JS 2 and more. platform: document-processing control: Server side export @@ -65,4 +65,4 @@ document.getElementById('export').addEventListener('click', function () { ``` -> DocumentEditor object is available in DocumentEditorContainer component(DocumentEditor packaged with toolbar, statusbar & properties pane) as [`documentEditor`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#documenteditor) +> DocumentEditor object is available in DocumentEditorContainer component(DocumentEditor packaged with toolbar, status bar & properties pane) as [`documentEditor`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#documenteditor) diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/section-format.md b/Document-Processing/Word/Word-Processor/javascript-es5/section-format.md index ac219e844..7ccb80128 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/section-format.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/section-format.md @@ -1,6 +1,6 @@ --- layout: post -title: Section format in JavaScript (ES5) Document editor control | Syncfusion +title: Section format in JavaScript (ES5) Document editor | Syncfusion description: Learn here all about Section format in Syncfusion JavaScript (ES5) Document editor control of Syncfusion Essential JS 2 and more. platform: document-processing control: Section format diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/styles.md b/Document-Processing/Word/Word-Processor/javascript-es5/styles.md index 8bfad2622..4d950d397 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/styles.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/styles.md @@ -206,7 +206,7 @@ var paragraphStyles = documentEditor.getStyles('Character'); ## Modify an existing style -You can modify a existing style with the specified style properties using [`createStyle`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor/#createStyle) method. If modifyExistingStyle parameter is set to `true` the style properties is updated to the existing style. +You can modify a existing style with the specified style properties using [`createStyle`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#createStyle) method. If modifyExistingStyle parameter is set to `true` the style properties is updated to the existing style. The following illustrate to modify an existing style. diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/table-of-contents.md b/Document-Processing/Word/Word-Processor/javascript-es5/table-of-contents.md index bc28079d8..2711158db 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/table-of-contents.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/table-of-contents.md @@ -1,6 +1,6 @@ --- layout: post -title: Table of contents in JavaScript (ES5) Document editor control | Syncfusion +title: Table of contents in JavaScript (ES5) Document editor | Syncfusion description: Learn here all about Table of contents in Syncfusion JavaScript (ES5) Document editor control of Syncfusion Essential JS 2 and more. platform: document-processing control: Table of contents @@ -16,7 +16,7 @@ The table of contents in a document is same as the list of chapters at the begin Document Editor exposes an API to insert table of contents at cursor position programmatically. You can specify the settings for table of contents explicitly. Otherwise, the default settings will be applied. -[`TableOfContentsSettings`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/tableOfContentsSettings/) contain the following properties: +[`TableOfContentsSettings`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/tableOfContentsSettings) contain the following properties: * **startLevel**: Specifies the start level for constructing table of contents. * **endLevel**: Specifies the end level for constructing table of contents. * **includeHyperlink**: Specifies whether the link for headings is included. From 6650cb8be6c53fec742e4b6076e06b8665530db5 Mon Sep 17 00:00:00 2001 From: Sujitha Siva Date: Mon, 16 Feb 2026 12:50:41 +0530 Subject: [PATCH 08/10] 809971: Resolved CI failure --- .../javascript-es5/how-to/customize-context-menu.md | 2 +- .../javascript-es5/how-to/customize-tool-bar.md | 2 +- .../how-to/deploy-document-editor-component-for-mobile.md | 4 ++-- .../javascript-es5/how-to/disable-optimized-text-measuring.md | 2 +- .../javascript-es5/how-to/resize-document-editor.md | 2 +- .../how-to/set-default-format-in-document-editor.md | 4 ++-- 6 files changed, 8 insertions(+), 8 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-context-menu.md b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-context-menu.md index 2938f143a..b4fce4973 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-context-menu.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-context-menu.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## ## How to customize context menu in Document Editor -Document Editor allows you to add custom option in context menu. It can be achieved by using the [`addCustomMenu()`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/contextMenu/#addcustommenu) method and custom action is defined using the [`customContextMenuSelect`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/customContentMenuEventArgs) +Document Editor allows you to add custom option in context menu. It can be achieved by using the [`addCustomMenu()`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/contextMenu#addcustommenu) method and custom action is defined using the [`customContextMenuSelect`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/customContentMenuEventArgs) ### Add Custom Option diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-tool-bar.md b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-tool-bar.md index 145e10839..40b65dd4c 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-tool-bar.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-tool-bar.md @@ -18,7 +18,7 @@ DocumentEditorContainer allows you to customize(add, show, hide, enable, and dis * Show, Hide - Existing items can be shown or hidden using the [`toolbarItems`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#toolbaritems) property. Pre-defined toolbar items are available with [`ToolbarItem`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/toolbarItem). -* Enable, Disable - Toolbar items can be enabled or disable using [`enableItems`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor-container/toolbar/#enableItems) +* Enable, Disable - Toolbar items can be enabled or disable using [`enableItems`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor-container/toolbar#enableItems) ```js diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/deploy-document-editor-component-for-mobile.md b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/deploy-document-editor-component-for-mobile.md index c1e6cb77d..747b83e28 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/deploy-document-editor-component-for-mobile.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/deploy-document-editor-component-for-mobile.md @@ -1,6 +1,6 @@ --- layout: post -title: Deploy Docx editor for mobile in JavaScript (ES5) Docx Editor | Syncfusion +title: Deploy DOCX editor for mobile in JavaScript (ES5) DOCX Editor | Syncfusion description: Learn here all about Deploy document editor component for mobile in Syncfusion JavaScript (ES5) Document editor control of Syncfusion Essential JS 2 and more. platform: document-processing control: Deploy document editor component for mobile @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Deploy Docx editor component for mobile in JavaScript(ES5) Docx editor +# Deploy Docx editor component for mobile in JavaScript(ES5) DOCX editor ## Document editor component for Mobile diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/disable-optimized-text-measuring.md b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/disable-optimized-text-measuring.md index 7a2bf6e1c..45a0ef0d2 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/disable-optimized-text-measuring.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/disable-optimized-text-measuring.md @@ -1,6 +1,6 @@ --- layout: post -title: Disable optimized text measuring in JavaScript (ES5) docx Editor | Syncfusion +title: Disable optimized text measuring in JavaScript (ES5) DOCX Editor | Syncfusion description: Learn here all about Disable optimized text measuring in Syncfusion JavaScript (ES5) Document editor control of Syncfusion Essential JS 2 and more. platform: document-processing control: Disable optimized text measuring diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/resize-document-editor.md b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/resize-document-editor.md index 884536a5d..c351e5297 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/resize-document-editor.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/resize-document-editor.md @@ -1,6 +1,6 @@ --- layout: post -title: Resize document editor in JavaScript (ES5) Docx editor | Syncfusion +title: Resize document editor in JavaScript (ES5) DOCX editor | Syncfusion description: Learn here all about Resize document editor in Syncfusion JavaScript (ES5) Document editor control of Syncfusion Essential JS 2 and more. platform: document-processing control: Resize document editor diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/set-default-format-in-document-editor.md b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/set-default-format-in-document-editor.md index 31872fa16..80f99c59c 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/set-default-format-in-document-editor.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/set-default-format-in-document-editor.md @@ -1,6 +1,6 @@ --- layout: post -title: Set default format in Docx editor in JavaScript (ES5) Docx Editor | Syncfusion +title: Set default format in DOCX editor in JavaScript (ES5) DOCX Editor | Syncfusion description: Learn here all about Set default format in document editor in Syncfusion JavaScript (ES5) Document editor control of Syncfusion Essential JS 2 and more. platform: document-processing control: Set default format in document editor @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Set default format in document editor in JavaScript (ES5) Docx editor +# Set default format in document editor in JavaScript (ES5) DOCX editor You can set the default character format, paragraph format and section format in Document editor. From 58e0d22b7487dec09ffc5fb3866c93eb5bbb0de0 Mon Sep 17 00:00:00 2001 From: Sujitha Siva Date: Mon, 16 Feb 2026 13:03:55 +0530 Subject: [PATCH 09/10] 809971: Resolved CI failure --- .../javascript-es5/how-to/customize-context-menu.md | 2 +- .../how-to/deploy-document-editor-component-for-mobile.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-context-menu.md b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-context-menu.md index b4fce4973..c55ef9a07 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-context-menu.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-context-menu.md @@ -136,7 +136,7 @@ The following is the output of custom context menu with customization. #### Customize Context Menu with sub-menu items -Document Editor allows you to customize the Context Menu with sub-menu items. It can be achieved by using the [`addCustomMenu()`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/contextMenu/#addcustommenu) method. +Document Editor allows you to customize the Context Menu with sub-menu items. It can be achieved by using the [`addCustomMenu()`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/contextMenu#addcustommenu) method. The following code shows how to add a sub items in the custom option in context menu in Document Editor Container. diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/deploy-document-editor-component-for-mobile.md b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/deploy-document-editor-component-for-mobile.md index 747b83e28..bca118ea7 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/deploy-document-editor-component-for-mobile.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/deploy-document-editor-component-for-mobile.md @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Deploy Docx editor component for mobile in JavaScript(ES5) DOCX editor +# Deploy DOCX editor component for mobile in JavaScript(ES5) DOCX editor ## Document editor component for Mobile From 954d460e4bd156ef086ffbae900ebee906452950 Mon Sep 17 00:00:00 2001 From: Sujitha Siva Date: Mon, 16 Feb 2026 13:41:08 +0530 Subject: [PATCH 10/10] 809971: Resolve CI Failure --- .../Word-Processor/javascript-es5/how-to/customize-ribbon.md | 2 +- .../how-to/deploy-document-editor-component-for-mobile.md | 2 +- .../javascript-es5/how-to/disable-optimized-text-measuring.md | 2 +- .../how-to/set-default-format-in-document-editor.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-ribbon.md b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-ribbon.md index 1388b6867..8b098d9ca 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-ribbon.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/customize-ribbon.md @@ -235,4 +235,4 @@ container.ribbon.addItem({ tabId: 'Home', index: 0 }, ribbonItem, 1); ## Related Links -- [File menu Customization Demo](https://document.syncfusion.com/demos/word-editor/javascript/index.html#/tailwind3/document-editor/ribbon-customization.html) \ No newline at end of file +- [File menu Customization Demo](https://document.syncfusion.com/demos/docx-editor/react/#/tailwind3/document-editor/ribbon-customization) \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/deploy-document-editor-component-for-mobile.md b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/deploy-document-editor-component-for-mobile.md index bca118ea7..17ae1d269 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/deploy-document-editor-component-for-mobile.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/deploy-document-editor-component-for-mobile.md @@ -1,6 +1,6 @@ --- layout: post -title: Deploy DOCX editor for mobile in JavaScript (ES5) DOCX Editor | Syncfusion +title: Deploy DOCX editor for mobile in JavaScript (ES5) | Syncfusion description: Learn here all about Deploy document editor component for mobile in Syncfusion JavaScript (ES5) Document editor control of Syncfusion Essential JS 2 and more. platform: document-processing control: Deploy document editor component for mobile diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/disable-optimized-text-measuring.md b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/disable-optimized-text-measuring.md index 45a0ef0d2..d301ae9f7 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/disable-optimized-text-measuring.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/disable-optimized-text-measuring.md @@ -1,6 +1,6 @@ --- layout: post -title: Disable optimized text measuring in JavaScript (ES5) DOCX Editor | Syncfusion +title: Disable optimized text measuring in JavaScript (ES5) | Syncfusion description: Learn here all about Disable optimized text measuring in Syncfusion JavaScript (ES5) Document editor control of Syncfusion Essential JS 2 and more. platform: document-processing control: Disable optimized text measuring diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/set-default-format-in-document-editor.md b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/set-default-format-in-document-editor.md index 80f99c59c..427d2a250 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/how-to/set-default-format-in-document-editor.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/how-to/set-default-format-in-document-editor.md @@ -1,6 +1,6 @@ --- layout: post -title: Set default format in DOCX editor in JavaScript (ES5) DOCX Editor | Syncfusion +title: Set default format in DOCX editor in JavaScript (ES5) | Syncfusion description: Learn here all about Set default format in document editor in Syncfusion JavaScript (ES5) Document editor control of Syncfusion Essential JS 2 and more. platform: document-processing control: Set default format in document editor