Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@ domainurl: ##DomainURL##

# Override the Keyboard Shortcuts in Vue Document Editor Component

[Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) triggers the [`keyDown`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#keydown) event every time when any key is entered and provides an instance of [`DocumentEditorKeyDownEventArgs`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/documentEditorKeyDownEventArgs/). You can use the [`isHandled`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/documentEditorKeyDownEventArgs#ishandled) property to override the keyboard shortcut behavior.
[Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) triggers the [`keyDown`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#keydown) event every time any key is entered and provides an instance of [`DocumentEditorKeyDownEventArgs`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/documentEditorKeyDownEventArgs). You can use the [`isHandled`](https://ej2.syncfusion.com/vue/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 html tabtitle="Composition API (~/src/App.vue)" %}
Expand All @@ -27,9 +27,9 @@ The following code shows how to prevent the `CTRL + C` keyboard shortcut for cop

{% previewsample "/document-processing/code-snippet/document-editor/vue/export-cs6" %}

## Override or define the keyboard shortcut
## Override or define a 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 default behavior.

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.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ domainurl: ##DomainURL##

# Read only by default in Vue Document editor component

In this article, we are going to see how to open a document in read only mode by default in Document Editor & Document Editor Container.
In this article, we are going to see how to open a document in read-only mode by default in the Document Editor & Document Editor Container.

## How to open a document in read only mode by default in DocumentEditor
## Opening a document in read-only mode by default in DocumentEditor

{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
Expand All @@ -25,9 +25,9 @@ In this article, we are going to see how to open a document in read only mode by

{% previewsample "/document-processing/code-snippet/document-editor/vue/getting-started-cs4" %}

> 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.

## How to open a document in ready only mode by default in DocumentEditorContainer
## Opening a document in read-only mode by default in DocumentEditorContainer

{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
Expand All @@ -40,6 +40,6 @@ In this article, we are going to see how to open a document in read only mode by

{% previewsample "/document-processing/code-snippet/document-editor/vue/getting-started-cs5" %}

> 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.

Note: You can use the `restrictEditing` in Document Editor Container and `isReadOnly` in Document Editor based on your requirement to change component to read only mode.
N> You can use the `restrictEditing` in `DocumentEditorContainerComponent` and `isReadOnly` in `DocumentEditorComponent` based on your requirement to change the component to read-only mode.
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ domainurl: ##DomainURL##

# Resize document editor in Vue Document editor component

In this article, we are going to see how to change height and width of [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor).
In this article, we are going to see how to change the height and width of the [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor).

## Change height of Document Editor

DocumentEditorContainer initially render with default height. You can change height of documenteditor using [`height`](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container/documentEditorContainerModel#height) property, the value which is in pixel.
DocumentEditorContainer initially renders with default height. You can change the height of the Document Editor using the [`height`](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container/documentEditorContainerModel#height) property, the value which 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 Document Editor.

```
<ejs-documenteditorcontainer ref='container' :serviceUrl='serviceUrl' height="590px" id='container' :enableToolbar='true'></ejs-documenteditorcontainer>
Expand All @@ -26,9 +26,9 @@ Similarly, you can use [`height`](https://ej2.syncfusion.com/vue/documentation/a

## Change width of Document Editor

DocumentEditorContainer initially render with default width. You can change width of documenteditor using [`width`](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container/documentEditorContainerModel#width) property, the value which is in percent.
DocumentEditorContainer initially renders with default width. You can change the width of the Document Editor using the [`width`](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container/documentEditorContainerModel#width) property, the value which is in percentages.

The following example code illustrates how to change width of Document Editor.
The following example code illustrates how to change the width of Document Editor.

```
<ejs-documenteditorcontainer ref='container' :serviceUrl='serviceUrl' v-on:created="onCreated" width="100%" id='container' :enableToolbar='true'></ejs-documenteditorcontainer>
Expand All @@ -38,9 +38,9 @@ Similarly, you can use [`width`](https://ej2.syncfusion.com/vue/documentation/ap

## Resize Document Editor

Using [`resize`](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container#resize) method, you change height and width of Document editor.
Using the [`resize`](https://ej2.syncfusion.com/vue/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.

{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
Expand All @@ -58,15 +58,15 @@ import { provide, ref } from 'vue';
const container = ref(null);
const serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';

//Inject require modules.
//Inject required modules.
provide('DocumentEditorContainer', [Toolbar]);

const onWindowResize = function () {
//Resizes the document editor component to fit full browser window automatically whenever the browser resized.
//Resizes the Document Editor component to fit full browser window automatically whenever the browser is resized.
updateDocumentEditorSize();
}
const updateDocumentEditorSize = function () {
//Resizes the document editor component to fit full browser window.
//Resizes the Document Editor component to fit full browser window.
let windowWidth = window.innerWidth;
let windowHeight = window.innerHeight;
container.value.ej2Instances.resize(windowWidth, windowHeight);
Expand Down Expand Up @@ -102,16 +102,16 @@ export default {
};
},
provide: {
//Inject require modules.
//Inject required modules.
DocumentEditorContainer: [Toolbar]
},
methods: {
onWindowResize: function () {
//Resizes the document editor component to fit full browser window automatically whenever the browser resized.
//Resizes the Document Editor component to fit full browser window automatically whenever the browser is resized.
this.updateDocumentEditorSize();
},
updateDocumentEditorSize: function () {
//Resizes the document editor component to fit full browser window.
//Resizes the Document Editor component to fit full browser window.
let windowWidth = window.innerWidth;
let windowHeight = window.innerHeight;
this.$refs.container.ej2Instances.resize(windowWidth, windowHeight);
Expand All @@ -130,4 +130,4 @@ export default {
{% endhighlight %}
{% endtabs %}

> 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