Skip to content
Open
Original file line number Diff line number Diff line change
@@ -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 | 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
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 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.

<table>
<tr>
Expand All @@ -27,14 +28,14 @@ As a backward compatibility to create older format SFDT files, refer the followi
<td>Client-side</td>
<td>
{% tabs %}
{% highlight ts tabtitle="Component Declaration"%}
{% highlight ts tabtitle="Component Declaration" %}
let container: DocumentEditorContainer = new DocumentEditorContainer();
{% endhighlight %}
{% endtabs %}
</td>
<td>
{% tabs %}
{% highlight ts tabtitle="Component Declaration"%}
{% highlight ts tabtitle="Component Declaration" %}
let container: DocumentEditorContainer = new DocumentEditorContainer({ documentEditorSettings: { optimizeSfdt: false } });
{% endhighlight %}
{% endtabs %}
Expand All @@ -44,15 +45,15 @@ let container: DocumentEditorContainer = new DocumentEditorContainer({ documentE
<td>Server-side C#</td>
<td>
{% tabs %}
{% highlight c# tabtitle="Import"%}
{% highlight c# tabtitle="Import" %}
WordDocument sfdtDocument = WordDocument.Load(stream, formatType);
string sfdt = Newtonsoft.Json.JsonConvert.SerializeObject(sfdtDocument);
{% endhighlight %}
{% endtabs %}
</td>
<td>
{% 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);
Expand All @@ -64,22 +65,22 @@ string sfdt = Newtonsoft.Json.JsonConvert.SerializeObject(sfdtDocument);
<td>Server-side Java</td>
<td>
{% tabs %}
{% highlight c# tabtitle="Import"%}
{% highlight java tabtitle="Import" %}
String sfdtDocument = WordProcessorHelper.load(stream, formatType);
{% endhighlight %}
{% endtabs %}
</td>
<td>
{% tabs %}
{% highlight java tabtitle="Import"%}
{% highlight java tabtitle="Import" %}
String sfdtDocument = WordProcessorHelper.load(stream, formatType, false);
{% endhighlight %}
{% endtabs %}
</td>
</tr>
</table>

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.

<table>
<tr>
Expand All @@ -89,7 +90,7 @@ To convert from older format SFDT from a new optimized SFDT file, refer the foll
<td>Client-side</td>
<td>
{% tabs %}
{% highlight ts tabtitle="Component Declaration"%}
{% highlight ts tabtitle="Component Declaration" %}
let container: DocumentEditorContainer = new DocumentEditorContainer({ documentEditorSettings: { optimizeSfdt: false } });
{% endhighlight %}
{% endtabs %}
Expand All @@ -99,8 +100,8 @@ let container: DocumentEditorContainer = new DocumentEditorContainer({ documentE
<td>Server-side C#</td>
<td>
{% tabs %}
{% highlight c# tabtitle="Import"%}
using(Syncfusion.DocIO.DLS.WordDocument docIODocument = WordDocument.Save(optimizedSfdt)) {
{% highlight c# tabtitle="Import" %}
using (Syncfusion.DocIO.DLS.WordDocument docIODocument = WordDocument.Save(optimizedSfdt)) {
sfdtDocument = WordDocument.Load(docIODocument);
sfdtDocument.OptimizeSfdt = false;
string oldSfdt = JsonSerializer.Serialize(sfdtDocument);
Expand All @@ -113,7 +114,7 @@ using(Syncfusion.DocIO.DLS.WordDocument docIODocument = WordDocument.Save(optimi
<td>Server-side Java</td>
<td>
{% tabs %}
{% highlight java tabtitle="Import"%}
{% highlight java tabtitle="Import" %}
WordDocument docIODocument = WordProcessorHelper.save(optimizedSfdt);
String oldSfdt = WordProcessorHelper.load(docIODocument, false);
{% endhighlight %}
Expand Down
Original file line number Diff line number Diff line change
@@ -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 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 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

[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" %}
Expand All @@ -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" %}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,49 +1,41 @@
---
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 | Syncfusion
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 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

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 %}
{% highlight html tabtitle="index.html" %}
{% 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 %}
{% highlight html tabtitle="index.html" %}
{% 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.
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.
Original file line number Diff line number Diff line change
@@ -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 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 document editor
control: Resize the Document Editor
documentation: ug
domainurl: ##DomainURL##
---

# Resize document editor in JavaScript (ES6) Document editor control
# Resize in JavaScript (ES6) Document Editor

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 {
Expand All @@ -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.
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.
Loading