From 4f5cea9fdc7294662534bad2f4a37af5c7d9600c Mon Sep 17 00:00:00 2001 From: Kalaivannan-Ganesan <93248069+Kalaivannan-Ganesan@users.noreply.github.com> Date: Mon, 10 Aug 2026 14:32:21 +0530 Subject: [PATCH 1/5] Moved howto changes into separate PR --- .../javascript-es6/how-to/optimize-sfdt.md | 25 +++++---- .../how-to/override-the-keyboard-shortcuts.md | 18 +++--- .../how-to/read-only-default.md | 32 ++++------- .../how-to/resize-document-editor.md | 46 +++++++-------- .../retrieve-the-bookmark-content-as-text.md | 56 +++++++++---------- 5 files changed, 85 insertions(+), 92 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/optimize-sfdt.md b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/optimize-sfdt.md index 1dede81517..032a233e35 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/optimize-sfdt.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/optimize-sfdt.md @@ -1,23 +1,24 @@ --- layout: post -title: Optimize sfdt in JavaScript (ES6) Document editor control | Syncfusion -description: Learn here all about Optimize sfdt in Syncfusion JavaScript (ES6) Document editor control of Syncfusion Essential JS 2 and more. +title: Optimize SFDT in JavaScript (ES6) DOCX Editor control | Syncfusion +description: Learn here all about optimizing SFDT in Syncfusion JavaScript (ES6) Document Editor control of Syncfusion Essential JS 2 and more. platform: document-processing -control: Optimize sfdt +control: Optimize SFDT documentation: ug domainurl: ##DomainURL## --- -# Optimize sfdt in JavaScript (ES6) Document editor control +# Optimize SFDT in JavaScript (ES6) Document Editor control -Starting from version v21.1.x, the SFDT file generated in Word Processor component is optimized by default to reduce the file size. All static keys are minified, and the final JSON string is compressed. This helps reduce the SFDT file size relative to a DOCX file and provides the following benefits, -* File transfer between client and server through the internet gets faster. +Starting from version v21.1.x, the SFDT file generated in the Document Editor component is optimized by default to reduce the file size. All static keys are minified, and the final JSON string is compressed. This helps reduce the SFDT file size relative to a DOCX file and provides the following benefits: +* File transfer between the client and server through the internet is faster. * The new optimized SFDT files require less storage space than the old SFDT files. -Hence, the optimized SFDT file can't be directly manipulated as JSON string. -> This feature comes with a public API to switch between the old and new optimized SFDT format, allowing backward compatibility. +Hence, the optimized SFDT file can't be directly manipulated as a JSON string. -As a backward compatibility to create older format SFDT files, refer the following code changes, +N> This feature comes with a public API to switch between the old and new optimized SFDT formats, allowing backward compatibility. + +For backward compatibility to create older-format SFDT files, refer to the following code changes. @@ -64,7 +65,7 @@ string sfdt = Newtonsoft.Json.JsonConvert.SerializeObject(sfdtDocument);
Server-side Java {% tabs %} -{% highlight c# tabtitle="Import"%} +{% highlight java tabtitle="Import"%} String sfdtDocument = WordProcessorHelper.load(stream, formatType); {% endhighlight %} {% endtabs %} @@ -79,7 +80,7 @@ String sfdtDocument = WordProcessorHelper.load(stream, formatType, false);
-To convert from older format SFDT from a new optimized SFDT file, refer the following code example, +To convert a new optimized SFDT file to the older SFDT format, refer to the following code example. @@ -100,7 +101,7 @@ let container: DocumentEditorContainer = new DocumentEditorContainer({ documentE
{% tabs %} {% highlight c# tabtitle="Import"%} -using(Syncfusion.DocIO.DLS.WordDocument docIODocument = WordDocument.Save(optimizedSfdt)) { +using (Syncfusion.DocIO.DLS.WordDocument docIODocument = WordDocument.Save(optimizedSfdt)) { sfdtDocument = WordDocument.Load(docIODocument); sfdtDocument.OptimizeSfdt = false; string oldSfdt = JsonSerializer.Serialize(sfdtDocument); diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/override-the-keyboard-shortcuts.md b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/override-the-keyboard-shortcuts.md index 0df8b1ad4a..3490c2516f 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/override-the-keyboard-shortcuts.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/override-the-keyboard-shortcuts.md @@ -1,20 +1,20 @@ --- layout: post -title: Override the keyboard shortcuts in JavaScript (ES6) Document editor control | Syncfusion -description: Learn here all about Override the keyboard shortcuts in Syncfusion JavaScript (ES6) Document editor control of Syncfusion Essential JS 2 and more. +title: Override Keyboard Shortcuts in JavaScript (ES6) DOCX Editor control | Syncfusion +description: Learn here all about overriding keyboard shortcuts in Syncfusion JavaScript (ES6) Document Editor control of Syncfusion Essential JS 2 and more. platform: document-processing -control: Override the keyboard shortcuts +control: Override Keyboard Shortcuts documentation: ug domainurl: ##DomainURL## --- -# Override the keyboard shortcuts in JavaScript (ES6) Document editor control +# Override Keyboard Shortcuts in JavaScript (ES6) Document Editor control -[TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) triggers the [`keyDown`](https://ej2.syncfusion.com/documentation/api/document-editor/#keydown) event every time when any key is entered and provides an instance of [`DocumentEditorKeyDownEventArgs`](https://ej2.syncfusion.com/documentation/api/document-editor/documentEditorKeyDownEventArgs/). You can use the [`isHandled`](https://ej2.syncfusion.com/documentation/api/document-editor/documentEditorKeyDownEventArgs#ishandled) property to override the keyboard shortcut behavior. +[TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) triggers the [`keyDown`](https://ej2.syncfusion.com/documentation/api/document-editor/#keydown) event every time a key is pressed and provides an instance of [`DocumentEditorKeyDownEventArgs`](https://ej2.syncfusion.com/documentation/api/document-editor/documentEditorKeyDownEventArgs/). You can use the [`isHandled`](https://ej2.syncfusion.com/documentation/api/document-editor/documentEditorKeyDownEventArgs#ishandled) property to override the keyboard shortcut behavior. -## Preventing default keyboard shortcut +## Prevent the default keyboard shortcut -The following code shows how to prevent the `CTRL + C` keyboard shortcut for copying selected content in Document Editor. +The following code shows how to prevent the `Ctrl + C` keyboard shortcut for copying selected content in the Document Editor. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -29,9 +29,9 @@ The following code shows how to prevent the `CTRL + C` keyboard shortcut for cop ## Override or define the keyboard shortcut -Override or define a new keyboard shortcut behavior instead of preventing the keyboard shortcut. +You can override or define a new keyboard shortcut behavior instead of preventing the keyboard shortcut. -For example, `Ctrl + S` keyboard shortcut saves the document in SFDT format by default, and there is no behavior for `Ctrl + Alt + S`. The following code demonstrates how to override the `Ctrl + S` shortcut to save a document in DOCX format and define `Ctrl + Alt + S` to save the document in SFDT format. +For example, the `Ctrl + S` keyboard shortcut saves the document in SFDT format by default, and there is no behavior for `Ctrl + Alt + S`. The following code demonstrates how to override the `Ctrl + S` shortcut to save the document in DOCX format and define `Ctrl + Alt + S` to save the document in SFDT format. {% tabs %} {% highlight ts tabtitle="index.ts" %} diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/read-only-default.md b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/read-only-default.md index 2cbcb308cc..afa72a9807 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/read-only-default.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/read-only-default.md @@ -1,22 +1,20 @@ --- layout: post -title: Read only default in JavaScript (ES6) Document editor control | Syncfusion -description: Learn here all about Read only default in Syncfusion JavaScript (ES6) Document editor control of Syncfusion Essential JS 2 and more. +title: Read-Only by Default in JavaScript (ES6) DOCX Editor control | Syncfusion +description: Learn here all about opening a document in read-only mode by default in Syncfusion JavaScript (ES6) Document Editor control of Syncfusion Essential JS 2 and more. platform: document-processing -control: Read only default +control: Read-Only by Default documentation: ug domainurl: ##DomainURL## --- -# Read only default in JavaScript (ES6) Document editor control +# Read-Only by Default in JavaScript (ES6) Document Editor control -In this article, we are going to see how to open a document in read only mode by default in DocumentEditor & DocumentEditorContainer. +In this article, we are going to see how to open a document in read-only mode by default in the DocumentEditor and DocumentEditorContainer. -## Opening a document in read only mode by default in DocumentEditor +## Opening a document in read-only mode by default in the DocumentEditor - - - {% tabs %} +{% tabs %} {% highlight ts tabtitle="index.ts" %} {% include code-snippet/document-editor/javascript-es6/read-cs1/index.ts %} {% endhighlight %} @@ -24,16 +22,12 @@ In this article, we are going to see how to open a document in read only mode by {% include code-snippet/document-editor/javascript-es6/read-cs1/index.html %} {% endhighlight %} {% endtabs %} - -{% previewsample "/document-processing/code-snippet/document-editor/javascript-es6/read-cs1" %} - - -## Opening a document in ready only mode by default in DocumentEditorContainer +{% previewsample "/document-processing/code-snippet/document-editor/javascript-es6/read-cs1" %} - +## Opening a document in read-only mode by default in the DocumentEditorContainer - {% tabs %} +{% tabs %} {% highlight ts tabtitle="index.ts" %} {% include code-snippet/document-editor/javascript-es6/read-container-cs1/index.ts %} {% endhighlight %} @@ -41,9 +35,7 @@ In this article, we are going to see how to open a document in read only mode by {% include code-snippet/document-editor/javascript-es6/read-container-cs1/index.html %} {% endhighlight %} {% endtabs %} - -{% previewsample "/document-processing/code-snippet/document-editor/javascript-es6/read-container-cs1" %} - +{% previewsample "/document-processing/code-snippet/document-editor/javascript-es6/read-container-cs1" %} ->Note: You can use the [`restrictEditing`](https://ej2.syncfusion.com/documentation/api/document-editor-container#restrictediting) in DocumentEditorContainer and [`isReadOnly`](https://ej2.syncfusion.com/documentation/api/document-editor#isreadonly) in DocumentEditor based on your requirement to change component to read only mode. \ No newline at end of file +N> You can use the [`restrictEditing`](https://ej2.syncfusion.com/documentation/api/document-editor-container#restrictediting) in DocumentEditorContainer and [`isReadOnly`](https://ej2.syncfusion.com/documentation/api/document-editor#isreadonly) in DocumentEditor based on your requirement to change the component to read-only mode. \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/resize-document-editor.md b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/resize-document-editor.md index aef9900cb2..030b252f80 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/resize-document-editor.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/resize-document-editor.md @@ -1,52 +1,52 @@ --- layout: post -title: Resize document editor in JavaScript (ES6) Document editor control | Syncfusion -description: Learn here all about Resize document editor in Syncfusion JavaScript (ES6) Document editor control of Syncfusion Essential JS 2 and more. +title: Resize the Document Editor in JavaScript (ES6) DOCX Editor control | Syncfusion +description: Learn here all about resizing the Document Editor in Syncfusion JavaScript (ES6) Document Editor control of Syncfusion Essential JS 2 and more. platform: document-processing -control: Resize document editor +control: Resize the Document Editor documentation: ug domainurl: ##DomainURL## --- -# Resize document editor in JavaScript (ES6) Document editor control +# Resize the Document Editor in JavaScript (ES6) Document Editor control -In this article, we are going to see how to change height and width of [TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor). +In this article, we are going to see how to change the height and width of the [TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor). -## Change height of Document Editor +## Change the height of the Document Editor -DocumentEditorContainer initially render with default height. You can change height of documenteditor using [`height`](https://ej2.syncfusion.com/documentation/api/document-editor-container/documentEditorContainerModel#height) property, the value which is in pixel. +The DocumentEditorContainer initially renders with a default height. You can change the height of the DocumentEditorContainer using the [`height`](https://ej2.syncfusion.com/documentation/api/document-editor-container/documentEditorContainerModel#height) property, whose value is in pixels. -The following example code illustrates how to change height of Document Editor. +The following example code illustrates how to change the height of the Document Editor. ```ts let container: DocumentEditorContainer = new DocumentEditorContainer({ - enableToolbar: true, height: "590px" + enableToolbar: true, height: '590px' }); container.appendTo('#DocumentEditor'); ``` -Similarly, you can use [`height`](https://ej2.syncfusion.com/documentation/api/document-editor#height) property for DocumentEditor also. +Similarly, you can use the [`height`](https://ej2.syncfusion.com/documentation/api/document-editor#height) property for the DocumentEditor as well. -## Change width of Document Editor +## Change the width of the Document Editor -DocumentEditorContainer initially render with default width. You can change width of documenteditor using [`width`](https://ej2.syncfusion.com/documentation/api/document-editor-container/documentEditorContainerModel#width) property, the value which is in percent. +The DocumentEditorContainer initially renders with a default width. You can change the width of the DocumentEditorContainer using the [`width`](https://ej2.syncfusion.com/documentation/api/document-editor-container/documentEditorContainerModel#width) property, whose value is in percent. -The following example code illustrates how to change width of Document Editor. +The following example code illustrates how to change the width of the Document Editor. ```ts let container: DocumentEditorContainer = new DocumentEditorContainer({ - enableToolbar: true, width: "100%" + enableToolbar: true, width: '100%' }); container.appendTo('#DocumentEditor'); ``` -Similarly, you can use [`width`](https://ej2.syncfusion.com/documentation/api/document-editor#width) property for DocumentEditor also. +Similarly, you can use the [`width`](https://ej2.syncfusion.com/documentation/api/document-editor#width) property for the DocumentEditor as well. -## Resize Document Editor +## Resize the Document Editor -Using [`resize`](https://ej2.syncfusion.com/documentation/api/document-editor-container#resize) method, you change height and width of Document editor. +Using the [`resize`](https://ej2.syncfusion.com/documentation/api/document-editor-container#resize) method, you can change the height and width of the Document Editor. -The following example code illustrates how to fit Document Editor to browser window size. +The following example code illustrates how to fit the Document Editor to the browser window size. ```ts import { @@ -69,15 +69,15 @@ container.created = (): void => { container.appendTo('#container'); function onWindowResize() { - //Resizes the document editor component to fit full browser window automatically whenever the browser resized. + //Resizes the document editor component to fit the full browser window automatically whenever the browser is resized. updateDocumentEditorSize(); } function updateDocumentEditorSize() { - //Resizes the document editor component to fit full browser window. - var windowWidth = window.innerWidth; - var windowHeight = window.innerHeight; + //Resizes the document editor component to fit the full browser window. + let windowWidth = window.innerWidth; + let windowHeight = window.innerHeight; container.resize(windowWidth, windowHeight); } ``` -> 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 +N> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/retrieve-the-bookmark-content-as-text.md b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/retrieve-the-bookmark-content-as-text.md index bfd0227daf..cb80b60fdc 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/retrieve-the-bookmark-content-as-text.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/retrieve-the-bookmark-content-as-text.md @@ -1,20 +1,20 @@ --- layout: post -title: Retrieve the bookmark content as text in JavaScript (ES6) Document editor control | Syncfusion -description: Learn here all about Retrieve the bookmark content as text in Syncfusion JavaScript (ES6) Document editor control of Syncfusion Essential JS 2 and more. +title: Retrieve the Bookmark Content as Text in JavaScript (ES6) DOCX Editor control | Syncfusion +description: Learn here all about retrieving the bookmark content as text in Syncfusion JavaScript (ES6) Document Editor control of Syncfusion Essential JS 2 and more. platform: document-processing -control: Retrieve the bookmark content as text +control: Retrieve the Bookmark Content as Text documentation: ug domainurl: ##DomainURL## --- -# Retrieve the bookmark content as text in JavaScript (ES6) Document editor control +# Retrieve the Bookmark Content as Text in JavaScript (ES6) Document Editor control You can get the bookmark or whole document content from the [TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) component as plain text and SFDT (rich text). ## Get the bookmark content as plain text -You can [`selectBookmark`](../bookmark#select-bookmark) API to navigate to the bookmark and use [`text`](https://ej2.syncfusion.com/documentation/api/document-editor/selection#text-code-classlanguage-textstringcode) API to get the bookmark content as plain text from JavaScript Document Editor component. +You can use the [`selectBookmark`](../bookmark#select-bookmark) API to navigate to the bookmark and use the [`text`](https://ej2.syncfusion.com/documentation/api/document-editor/selection#text-code-classlanguage-textstringcode) API to get the bookmark content as plain text from the JavaScript Document Editor component. The following example code illustrates how to get the bookmark content as plain text. @@ -28,27 +28,27 @@ let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToo container.serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'; container.appendTo('#container'); -// To insert text in cursor position +// To insert text at the cursor position container.documentEditor.editor.insertText('Document editor'); -// To select all the content in document +// To select all the content in the document container.documentEditor.selection.selectAll(); -// Insert bookmark to selected content +// Insert a bookmark to the selected content container.documentEditor.editor.insertBookmark('Bookmark1'); -// Provide your bookmark name to navigate to specific bookmark +// Provide your bookmark name to navigate to a specific bookmark container.documentEditor.selection.selectBookmark('Bookmark1'); // To get the selected content as text - let selectedContent: string = container.documentEditor.selection.text; +let selectedContent: string = container.documentEditor.selection.text; ``` -> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. +N> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. -To get the bookmark content as SFDT (rich text), please check this [`link`](../how-to/get-the-selected-content#get-the-selected-content-as-sfdt-rich-text) +To get the bookmark content as SFDT (rich text), please check this [link](../how-to/get-the-selected-content#get-the-selected-content-as-sfdt-rich-text). ## Get the whole document content as text -You can use [`text`](https://ej2.syncfusion.com/documentation/api/document-editor/selection#text-code-classlanguage-textstringcode) API to get the whole document content as plain text from JavaScript Document Editor component. +You can use the [`text`](https://ej2.syncfusion.com/documentation/api/document-editor/selection#text-code-classlanguage-textstringcode) API to get the whole document content as plain text from the JavaScript Document Editor component. The following example code illustrates how to get the whole document content as plain text. @@ -62,20 +62,20 @@ let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToo container.serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'; container.appendTo('#container'); -// To insert text in cursor position +// To insert text at the cursor position container.documentEditor.editor.insertText('Document editor'); -// To select all the content in document +// To select all the content in the document container.documentEditor.selection.selectAll(); // To get the content as text - let selectedContent: string = container.documentEditor.selection.text; +let selectedContent: string = container.documentEditor.selection.text; ``` -> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. +N> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. -## Get the whole document content as SFDT(rich text) +## Get the whole document content as SFDT (rich text) -You can use [`serialize`](https://ej2.syncfusion.com/documentation/api/document-editor#serialize) API to get the whole document content as SFDT string from JavaScript Document Editor component. +You can use the [`serialize`](https://ej2.syncfusion.com/documentation/api/document-editor#serialize) API to get the whole document content as SFDT string from the JavaScript Document Editor component. The following example code illustrates how to get the whole document content as SFDT. @@ -89,17 +89,17 @@ let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToo container.serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'; container.appendTo('#container'); -// To insert text in cursor position +// To insert text at the cursor position container.documentEditor.editor.insertText('Document editor'); // To get the content as SFDT - let selectedContent: string = container.documentEditor.serialize(); +let selectedContent: string = container.documentEditor.serialize(); ``` ## Get the header content as text -You can use [`goToHeader`](https://ej2.syncfusion.com/documentation/api/document-editor/selection#gotoheader) API to navigate the selection to the header and then use [`text`](https://ej2.syncfusion.com/documentation/api/document-editor/selection#text-code-classlanguage-textstringcode) API to get the content as plain text. +You can use the [`goToHeader`](https://ej2.syncfusion.com/documentation/api/document-editor/selection#gotoheader) API to navigate the selection to the header and then use the [`text`](https://ej2.syncfusion.com/documentation/api/document-editor/selection#text-code-classlanguage-textstringcode) API to get the content as plain text. The following example code illustrates how to get the header content as plain text. @@ -113,17 +113,17 @@ let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToo container.serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'; container.appendTo('#container'); -// To navigate the selection to header +// To navigate the selection to the header container.documentEditor.selection.goToHeader(); -// To insert text in cursor position +// To insert text at the cursor position container.documentEditor.editor.insertText('Document editor'); -// To select all the content in document +// To select all the content in the document container.documentEditor.selection.selectAll(); // To get the selected content as text - let selectedContent: string = container.documentEditor.selection.text; +let selectedContent: string = container.documentEditor.selection.text; ``` -> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. +N> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property. -Similarly, you can use [`goToFooter`](https://ej2.syncfusion.com/documentation/api/document-editor/selection#gotofooter) API to navigate the selection to the footer and then use [`text`](https://ej2.syncfusion.com/documentation/api/document-editor/selection#text-code-classlanguage-textstringcode) API to get the content as plain text. \ No newline at end of file +Similarly, you can use the [`goToFooter`](https://ej2.syncfusion.com/documentation/api/document-editor/selection#gotofooter) API to navigate the selection to the footer and then use the [`text`](https://ej2.syncfusion.com/documentation/api/document-editor/selection#text-code-classlanguage-textstringcode) API to get the content as plain text. \ No newline at end of file From b1fc66990ea23492ae85d6e29cb40c8b98cc1644 Mon Sep 17 00:00:00 2001 From: Kalaivannan-Ganesan <93248069+Kalaivannan-Ganesan@users.noreply.github.com> Date: Mon, 10 Aug 2026 16:39:14 +0530 Subject: [PATCH 2/5] Resolved CI Failures --- .../javascript-es6/how-to/optimize-sfdt.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/optimize-sfdt.md b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/optimize-sfdt.md index 032a233e35..e466e0b588 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/optimize-sfdt.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/optimize-sfdt.md @@ -28,14 +28,14 @@ For backward compatibility to create older-format SFDT files, refer to the follo Client-side {% tabs %} -{% highlight ts tabtitle="Component Declaration"%} +{% highlight ts tabtitle="Component Declaration" %} let container: DocumentEditorContainer = new DocumentEditorContainer(); {% endhighlight %} {% endtabs %} {% tabs %} -{% highlight ts tabtitle="Component Declaration"%} +{% highlight ts tabtitle="Component Declaration" %} let container: DocumentEditorContainer = new DocumentEditorContainer({ documentEditorSettings: { optimizeSfdt: false } }); {% endhighlight %} {% endtabs %} @@ -45,7 +45,7 @@ let container: DocumentEditorContainer = new DocumentEditorContainer({ documentE Server-side C# {% tabs %} -{% highlight c# tabtitle="Import"%} +{% highlight c# tabtitle="Import" %} WordDocument sfdtDocument = WordDocument.Load(stream, formatType); string sfdt = Newtonsoft.Json.JsonConvert.SerializeObject(sfdtDocument); {% endhighlight %} @@ -53,7 +53,7 @@ string sfdt = Newtonsoft.Json.JsonConvert.SerializeObject(sfdtDocument); {% tabs %} -{% highlight c# tabtitle="Import"%} +{% highlight c# tabtitle="Import" %} WordDocument sfdtDocument = WordDocument.Load(stream, formatType); sfdtDocument.OptimizeSfdt = false; string sfdt = Newtonsoft.Json.JsonConvert.SerializeObject(sfdtDocument); @@ -65,14 +65,14 @@ string sfdt = Newtonsoft.Json.JsonConvert.SerializeObject(sfdtDocument); Server-side Java {% tabs %} -{% highlight java tabtitle="Import"%} +{% highlight java tabtitle="Import" %} String sfdtDocument = WordProcessorHelper.load(stream, formatType); {% endhighlight %} {% endtabs %} {% tabs %} -{% highlight java tabtitle="Import"%} +{% highlight java tabtitle="Import" %} String sfdtDocument = WordProcessorHelper.load(stream, formatType, false); {% endhighlight %} {% endtabs %} @@ -90,7 +90,7 @@ To convert a new optimized SFDT file to the older SFDT format, refer to the foll Client-side {% tabs %} -{% highlight ts tabtitle="Component Declaration"%} +{% highlight ts tabtitle="Component Declaration" %} let container: DocumentEditorContainer = new DocumentEditorContainer({ documentEditorSettings: { optimizeSfdt: false } }); {% endhighlight %} {% endtabs %} @@ -100,7 +100,7 @@ let container: DocumentEditorContainer = new DocumentEditorContainer({ documentE Server-side C# {% tabs %} -{% highlight c# tabtitle="Import"%} +{% highlight c# tabtitle="Import" %} using (Syncfusion.DocIO.DLS.WordDocument docIODocument = WordDocument.Save(optimizedSfdt)) { sfdtDocument = WordDocument.Load(docIODocument); sfdtDocument.OptimizeSfdt = false; @@ -114,7 +114,7 @@ using (Syncfusion.DocIO.DLS.WordDocument docIODocument = WordDocument.Save(optim Server-side Java {% tabs %} -{% highlight java tabtitle="Import"%} +{% highlight java tabtitle="Import" %} WordDocument docIODocument = WordProcessorHelper.save(optimizedSfdt); String oldSfdt = WordProcessorHelper.load(docIODocument, false); {% endhighlight %} From af633fb3cefc5aa5d573c59b499801764ec07492 Mon Sep 17 00:00:00 2001 From: Kalaivannan-Ganesan <93248069+Kalaivannan-Ganesan@users.noreply.github.com> Date: Mon, 10 Aug 2026 22:13:53 +0530 Subject: [PATCH 3/5] Resolved the CI Failures --- .../how-to/override-the-keyboard-shortcuts.md | 6 +++--- .../javascript-es6/how-to/read-only-default.md | 6 +++--- .../javascript-es6/how-to/resize-document-editor.md | 4 ++-- .../how-to/retrieve-the-bookmark-content-as-text.md | 4 ++-- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/override-the-keyboard-shortcuts.md b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/override-the-keyboard-shortcuts.md index 3490c2516f..cd91f99122 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/override-the-keyboard-shortcuts.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/override-the-keyboard-shortcuts.md @@ -1,6 +1,6 @@ --- layout: post -title: Override Keyboard Shortcuts in JavaScript (ES6) DOCX Editor control | Syncfusion +title: Override Keyboard Shortcuts in JS (ES6) DOCX Editor | Syncfusion description: Learn here all about overriding keyboard shortcuts in Syncfusion JavaScript (ES6) Document Editor control of Syncfusion Essential JS 2 and more. platform: document-processing control: Override Keyboard Shortcuts @@ -8,9 +8,9 @@ documentation: ug domainurl: ##DomainURL## --- -# Override Keyboard Shortcuts in JavaScript (ES6) Document Editor control +# Override Keyboard Shortcuts in JavaScript (ES6) DOCX Editor -[TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) triggers the [`keyDown`](https://ej2.syncfusion.com/documentation/api/document-editor/#keydown) event every time a key is pressed and provides an instance of [`DocumentEditorKeyDownEventArgs`](https://ej2.syncfusion.com/documentation/api/document-editor/documentEditorKeyDownEventArgs/). You can use the [`isHandled`](https://ej2.syncfusion.com/documentation/api/document-editor/documentEditorKeyDownEventArgs#ishandled) property to override the keyboard shortcut behavior. +[TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) triggers the [`keyDown`](https://ej2.syncfusion.com/documentation/api/document-editor#keydown) event every time a key is pressed and provides an instance of [`DocumentEditorKeyDownEventArgs`](https://ej2.syncfusion.com/documentation/api/document-editor/documentEditorKeyDownEventArgs). You can use the [`isHandled`](https://ej2.syncfusion.com/documentation/api/document-editor/documentEditorKeyDownEventArgs#ishandled) property to override the keyboard shortcut behavior. ## Prevent the default keyboard shortcut diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/read-only-default.md b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/read-only-default.md index afa72a9807..90010a3094 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/read-only-default.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/read-only-default.md @@ -1,14 +1,14 @@ --- layout: post -title: Read-Only by Default in JavaScript (ES6) DOCX Editor control | Syncfusion -description: Learn here all about opening a document in read-only mode by default in Syncfusion JavaScript (ES6) Document Editor control of Syncfusion Essential JS 2 and more. +title: Read-Only by Default in JavaScript (ES6) DOCX Editor | Syncfusion +description: Learn here all about opening a document in read-only mode by default in Syncfusion JavaScript (ES6) DOCX Editor of Syncfusion Essential JS 2 and more. platform: document-processing control: Read-Only by Default documentation: ug domainurl: ##DomainURL## --- -# Read-Only by Default in JavaScript (ES6) Document Editor control +# Read-Only by Default in JavaScript (ES6) DOCX Editor In this article, we are going to see how to open a document in read-only mode by default in the DocumentEditor and DocumentEditorContainer. diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/resize-document-editor.md b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/resize-document-editor.md index 030b252f80..345eaa59de 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/resize-document-editor.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/resize-document-editor.md @@ -1,6 +1,6 @@ --- layout: post -title: Resize the Document Editor in JavaScript (ES6) DOCX Editor control | Syncfusion +title: Resize Document Editor in JavaScript (ES6) DOCX Editor | Syncfusion description: Learn here all about resizing the Document Editor in Syncfusion JavaScript (ES6) Document Editor control of Syncfusion Essential JS 2 and more. platform: document-processing control: Resize the Document Editor @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Resize the Document Editor in JavaScript (ES6) Document Editor control +# Resize Document Editor in JavaScript (ES6) DOCX Editor In this article, we are going to see how to change the height and width of the [TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor). diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/retrieve-the-bookmark-content-as-text.md b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/retrieve-the-bookmark-content-as-text.md index cb80b60fdc..a730cd6951 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/retrieve-the-bookmark-content-as-text.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/retrieve-the-bookmark-content-as-text.md @@ -1,6 +1,6 @@ --- layout: post -title: Retrieve the Bookmark Content as Text in JavaScript (ES6) DOCX Editor control | Syncfusion +title: Retrieve Bookmark Content as Text in JS (ES6) DOCX Editor | Syncfusion description: Learn here all about retrieving the bookmark content as text in Syncfusion JavaScript (ES6) Document Editor control of Syncfusion Essential JS 2 and more. platform: document-processing control: Retrieve the Bookmark Content as Text @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Retrieve the Bookmark Content as Text in JavaScript (ES6) Document Editor control +# Retrieve Bookmark Content as Text in JavaScript (ES6) DOCX Editor You can get the bookmark or whole document content from the [TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) component as plain text and SFDT (rich text). From 78e4c0aef33a7ddc5a344fae3ce6fbf0085f3261 Mon Sep 17 00:00:00 2001 From: Kalaivannan-Ganesan <93248069+Kalaivannan-Ganesan@users.noreply.github.com> Date: Tue, 11 Aug 2026 07:43:41 +0530 Subject: [PATCH 4/5] Addressed the Heading, Title and Description feedbacks --- .../Word-Processor/javascript-es6/how-to/optimize-sfdt.md | 6 +++--- .../how-to/override-the-keyboard-shortcuts.md | 6 +++--- .../javascript-es6/how-to/read-only-default.md | 4 ++-- .../javascript-es6/how-to/resize-document-editor.md | 6 +++--- .../how-to/retrieve-the-bookmark-content-as-text.md | 6 +++--- 5 files changed, 14 insertions(+), 14 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/optimize-sfdt.md b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/optimize-sfdt.md index e466e0b588..2587226e97 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/optimize-sfdt.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/optimize-sfdt.md @@ -1,14 +1,14 @@ --- layout: post -title: Optimize SFDT in JavaScript (ES6) DOCX Editor control | Syncfusion -description: Learn here all about optimizing SFDT in Syncfusion JavaScript (ES6) Document Editor control of Syncfusion Essential JS 2 and more. +title: Optimize SFDT in JavaScript (ES6) DOCX Editor | Syncfusion +description: Learn how to optimize SFDT in Syncfusion JavaScript (ES6) DOCX Editor to reduce file size and speed up client-server document transfer. platform: document-processing control: Optimize SFDT documentation: ug domainurl: ##DomainURL## --- -# Optimize SFDT in JavaScript (ES6) Document Editor control +# Optimize SFDT in JavaScript (ES6) Document Editor Starting from version v21.1.x, the SFDT file generated in the Document Editor component is optimized by default to reduce the file size. All static keys are minified, and the final JSON string is compressed. This helps reduce the SFDT file size relative to a DOCX file and provides the following benefits: * File transfer between the client and server through the internet is faster. diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/override-the-keyboard-shortcuts.md b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/override-the-keyboard-shortcuts.md index cd91f99122..74d699b4cd 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/override-the-keyboard-shortcuts.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/override-the-keyboard-shortcuts.md @@ -1,14 +1,14 @@ --- layout: post -title: Override Keyboard Shortcuts in JS (ES6) DOCX Editor | Syncfusion -description: Learn here all about overriding keyboard shortcuts in Syncfusion JavaScript (ES6) Document Editor control of Syncfusion Essential JS 2 and more. +title: Override Keyboard Shortcuts in JavaScript (ES6) DOCX Editor | Syncfusion +description: Learn how to override keyboard shortcuts in Syncfusion JavaScript (ES6) DOCX Editor using the keyDown event and isHandled property. platform: document-processing control: Override Keyboard Shortcuts documentation: ug domainurl: ##DomainURL## --- -# Override Keyboard Shortcuts in JavaScript (ES6) DOCX Editor +# Override Keyboard Shortcuts in JavaScript (ES6) Document Editor [TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) triggers the [`keyDown`](https://ej2.syncfusion.com/documentation/api/document-editor#keydown) event every time a key is pressed and provides an instance of [`DocumentEditorKeyDownEventArgs`](https://ej2.syncfusion.com/documentation/api/document-editor/documentEditorKeyDownEventArgs). You can use the [`isHandled`](https://ej2.syncfusion.com/documentation/api/document-editor/documentEditorKeyDownEventArgs#ishandled) property to override the keyboard shortcut behavior. diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/read-only-default.md b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/read-only-default.md index 90010a3094..4f97bd38b0 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/read-only-default.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/read-only-default.md @@ -1,14 +1,14 @@ --- layout: post title: Read-Only by Default in JavaScript (ES6) DOCX Editor | Syncfusion -description: Learn here all about opening a document in read-only mode by default in Syncfusion JavaScript (ES6) DOCX Editor of Syncfusion Essential JS 2 and more. +description: Learn how to open a document in read-only mode by default in Syncfusion JavaScript (ES6) DOCX Editor for DocumentEditor and DocumentEditorContainer. platform: document-processing control: Read-Only by Default documentation: ug domainurl: ##DomainURL## --- -# Read-Only by Default in JavaScript (ES6) DOCX Editor +# Read-Only by Default in JavaScript (ES6) Document Editor In this article, we are going to see how to open a document in read-only mode by default in the DocumentEditor and DocumentEditorContainer. diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/resize-document-editor.md b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/resize-document-editor.md index 345eaa59de..0be2cd5aba 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/resize-document-editor.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/resize-document-editor.md @@ -1,14 +1,14 @@ --- layout: post -title: Resize Document Editor in JavaScript (ES6) DOCX Editor | Syncfusion -description: Learn here all about resizing the Document Editor in Syncfusion JavaScript (ES6) Document Editor control of Syncfusion Essential JS 2 and more. +title: Resize in JavaScript (ES6) DOCX Editor | Syncfusion +description: Learn how to resize the editor in Syncfusion JavaScript (ES6) DOCX Editor by changing the height and width properties. platform: document-processing control: Resize the Document Editor documentation: ug domainurl: ##DomainURL## --- -# Resize Document Editor in JavaScript (ES6) DOCX Editor +# Resize in JavaScript (ES6) Document Editor In this article, we are going to see how to change the height and width of the [TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor). diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/retrieve-the-bookmark-content-as-text.md b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/retrieve-the-bookmark-content-as-text.md index a730cd6951..788fc962a2 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/retrieve-the-bookmark-content-as-text.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/retrieve-the-bookmark-content-as-text.md @@ -1,14 +1,14 @@ --- layout: post -title: Retrieve Bookmark Content as Text in JS (ES6) DOCX Editor | Syncfusion -description: Learn here all about retrieving the bookmark content as text in Syncfusion JavaScript (ES6) Document Editor control of Syncfusion Essential JS 2 and more. +title: Bookmark Content as Text in JavaScript (ES6) DOCX Editor | Syncfusion +description: Learn how to retrieve the bookmark content as text in Syncfusion JavaScript (ES6) DOCX Editor using the selectBookmark and text APIs. platform: document-processing control: Retrieve the Bookmark Content as Text documentation: ug domainurl: ##DomainURL## --- -# Retrieve Bookmark Content as Text in JavaScript (ES6) DOCX Editor +# Retrieve Bookmark as Text in JavaScript (ES6) Document Editor You can get the bookmark or whole document content from the [TypeScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) component as plain text and SFDT (rich text). From 4252ed5755a098004dd24ce8beec33bcef9a6bf4 Mon Sep 17 00:00:00 2001 From: Kalaivannan-Ganesan <93248069+Kalaivannan-Ganesan@users.noreply.github.com> Date: Tue, 11 Aug 2026 07:58:10 +0530 Subject: [PATCH 5/5] Resolved the CI Failures --- .../javascript-es6/how-to/override-the-keyboard-shortcuts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/override-the-keyboard-shortcuts.md b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/override-the-keyboard-shortcuts.md index 74d699b4cd..0c81b0a773 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es6/how-to/override-the-keyboard-shortcuts.md +++ b/Document-Processing/Word/Word-Processor/javascript-es6/how-to/override-the-keyboard-shortcuts.md @@ -1,6 +1,6 @@ --- layout: post -title: Override Keyboard Shortcuts in JavaScript (ES6) DOCX Editor | Syncfusion +title: Override Keyboard Shortcuts JavaScript (ES6) DOCX Editor | Syncfusion description: Learn how to override keyboard shortcuts in Syncfusion JavaScript (ES6) DOCX Editor using the keyDown event and isHandled property. platform: document-processing control: Override Keyboard Shortcuts