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
16 changes: 9 additions & 7 deletions Document-Processing/Word/Word-Processor/vue/restrict-editing.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ domainurl: ##DomainURL##

# Restrict Editing in Vue DOCX Editor

Syncfusion® Vue DOCX Editor (Document Editor) provides support for restricting editing within a document. It enables control over how and where content can be modified. This helps limit editing so only specific sections of the document can be changed.
[Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) provides support for restricting editing within a document. It enables control over how and where content can be modified. This helps limit editing so only specific sections of the document can be changed.

## Configure on client side

Document Editor provides options to protect and unprotect a document using the [enforceProtection](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor#enforceprotection) and [stopProtection](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor#stopprotection) APIs, enabling various restricting editing operations.
The Document Editor provides options to protect and unprotect a document using the [enforceProtection](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor#enforceprotection) and [stopProtection](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor#stopprotection) APIs, enabling various restrict-editing operations.

### Read only mode
### Read-only mode

Document Editor supports protecting a document in read-only mode, where users can only view the content without making changes.

Expand Down Expand Up @@ -298,7 +298,7 @@ export default {

### Format restrictions

Enforces document protection using the specified credentials. In the [enforceProtection](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor#enforceprotection-1) method, the second parameter represents limitToFormatting, and the third parameter represents isReadOnly.
The Document Editor enforces document protection using the specified credentials. In the [enforceProtection](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor#enforceprotection-1) method, the second parameter represents `limitToFormatting`, and the third parameter represents `isReadOnly`.

{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
Expand Down Expand Up @@ -380,10 +380,12 @@ this.$refs.doceditcontainer.ej2Instances.documentEditor.currentUser = 'engineer@
```

## Protect document with editable region
User can select a specific section and mark it as an editable region, allowing modification only in that part. The rest of the document remains protected from any changes.

Users can select a specific section and mark it as an editable region, allowing modification only in that part. The rest of the document remains protected from any changes.

### Insert editable region
Use the [insertEditingRegion](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor#inserteditingregion) method to mark specific paragraphs as editable.This allows you to control editing by giving access to all users or only selected users.

Use the [insertEditingRegion](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor#inserteditingregion) method to mark specific paragraphs as editable. This allows you to control editing by giving access to all users or only selected users.

The following example shows how to insert an editable region.
{% tabs %}
Expand Down Expand Up @@ -426,7 +428,7 @@ this.$refs.doceditcontainer.ej2Instances.documentEditor.documentEditorSettings.h
{% endhighlight %}
{% endtabs %}

## Restrict Editing Pane
## Restrict editing pane

Restrict Editing Pane provides the following options to manage the document:
* To apply formatting restrictions to the current document, select the allow formatting check box.
Expand Down
14 changes: 7 additions & 7 deletions Document-Processing/Word/Word-Processor/vue/ribbon.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,16 @@ The [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor

You can switch between the classic **Toolbar** and the new **Ribbon** UI, and you can also choose between **Classic** and **Simplified** ribbon layouts.

## Enable Ribbon Mode
## Enable ribbon mode

To enable Ribbon in Document Editor, use the [`toolbarMode`](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container#toolbarmode) property of `DocumentEditorContainer`. The available toolbar modes are:
To enable Ribbon in Vue Document Editor, use the [`toolbarMode`](https://ej2.syncfusion.com/vue/documentation/api/document-editor-container#toolbarmode) property of `DocumentEditorContainer`. The available toolbar modes are:

- **'Toolbar'** - The traditional toolbar UI.
- **'Ribbon'** - The Ribbon UI, which provides a tabbed interface with grouped commands.

By default, `toolbarMode` is `Toolbar`.

To use Ribbon mode, add Document Editor component and its dependent component styles available in **../node_modules/@syncfusion** package folder. This can be added as reference in **src/App.vue**.
To use Ribbon mode, add Document Editor component and its dependent component styles available in **../node_modules/@syncfusion** package folder. This can be added as reference in **src/App.css**.

```css
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
Expand All @@ -38,7 +38,7 @@ To use Ribbon mode, add Document Editor component and its dependent component st
@import '../node_modules/@syncfusion/ej2-ribbon/styles/material.css';/* Required for Ribbon */
```

The following code shows the how to enable the `Ribbon` in Document Editor.
The following code shows how to enable the `Ribbon` in the Document Editor.

{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
Expand Down Expand Up @@ -88,7 +88,7 @@ export default {
{% endhighlight %}
{% endtabs %}

## Ribbon Layouts
## Ribbon layouts

Document Editor provides two different Ribbon layouts:

Expand All @@ -97,7 +97,7 @@ Document Editor provides two different Ribbon layouts:

By default, `ribbonLayout` is set to `Simplified`.

The following code shows the how to configure the ribbon layout in Document Editor:
The following code shows how to configure the ribbon layout in the Document Editor:

{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
Expand Down Expand Up @@ -147,6 +147,6 @@ export default {
{% endhighlight %}
{% endtabs %}

## See Also
## See also

* [How to customize the ribbon](./how-to/customize-ribbon)
6 changes: 3 additions & 3 deletions Document-Processing/Word/Word-Processor/vue/right-to-left.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ domainurl: ##DomainURL##

# Right to left in Vue Document editor component

[Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) provides RTL (right-to-left) support. This can be enabled using the enableRtl property.
[Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) provides RTL (right-to-left) support. This can be enabled using the `enableRtl` property.

{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
Expand All @@ -23,6 +23,6 @@ domainurl: ##DomainURL##

{% previewsample "/document-processing/code-snippet/document-editor/vue/right-to-left-cs1" %}

## Online Demo
## Online demo

Explore how to use right-to-left layout in Word documents using the Vue Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/vue/#/tailwind3/document-editor/right-to-left.html).
Explore how to enable right-to-left layout in Word documents using the Vue Document Editor in this [live demo](https://document.syncfusion.com/demos/docx-editor/vue/#/tailwind3/document-editor/right-to-left.html).
14 changes: 7 additions & 7 deletions Document-Processing/Word/Word-Processor/vue/scrolling-zooming.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ domainurl: ##DomainURL##

# Scrolling zooming in Vue Document editor component

The [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) renders the document as page by page. You can scroll through the pages by mouse wheel or touch interactions. You can also scroll through the page by using scrollToPage() method of Document Editor instance. Refer to the following code example.
The [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) renders the document page by page. You can scroll through the pages by mouse wheel or touch interactions. You can also scroll through the pages by using the `scrollToPage()` method of the document editor instance. Refer to the following code example.

{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
Expand All @@ -23,9 +23,9 @@ The [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor

{% previewsample "/document-processing/code-snippet/document-editor/vue/scrolling-zooming-cs1" %}

> Calling this method brings the specified page into view but doesnt move selection. Hence this method will work by default. That is, it works even if selection is not enabled.
N> Calling this method brings the specified page into view but doesn't move selection. Hence this method will work by default. That is, it works even if selection is not enabled.

In case, if you wish to move the selection to any page in Document Editor and bring it into view, you can use goToPage() method of selection instance. Refer to the following code example.
If you wish to move the selection to any page in the document editor and bring it into view, you can use the `goToPage()` method of the selection instance. Refer to the following code example.

{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
Expand All @@ -40,7 +40,7 @@ In case, if you wish to move the selection to any page in Document Editor and br

## Zooming

You can scale the contents in Document Editor ranging from 10% to 500% of the actual size. You can achieve this using mouse or touch interactions. You can also use zoomFactor property of Document Editor instance. The value can be specified in a range from 0.1 to 5. Refer to the following code example.
You can scale the contents in the Document Editor ranging from 10% to 500% of the actual size. You can achieve this using mouse or touch interactions. You can also use the `zoomFactor` property of the document editor instance. The value can be specified in a range from 0.1 to 5. Refer to the following code example.

{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
Expand Down Expand Up @@ -96,9 +96,9 @@ export default {
{% endhighlight %}
{% endtabs %}

## Page Fit Type
## Page fit type

Apart from specifying the zoom factor as value, the Document Editor provides option to specify page fit options such as fit to full page or fit to page width. You can set this option using fitPage method of Document Editor instance. Refer to the following code example.
Apart from specifying the zoom factor as a value, the Document Editor provides an option to specify page fit options such as fit to full page or fit to page width. You can set this option using the `fitPage` method of the document editor instance. Refer to the following code example.

{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
Expand Down Expand Up @@ -157,7 +157,7 @@ export default {

## Zoom option using UI

The following code example shows how to provide zoom options in Document Editor.
The following code example shows how to provide zoom options in the Document Editor.

{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
Expand Down
29 changes: 16 additions & 13 deletions Document-Processing/Word/Word-Processor/vue/section-format.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ domainurl: ##DomainURL##

## Page size

You can get or set the size of a section at cursor position by using the following sample code.
You can get or set the size of a section at the cursor position by using the following sample code.

```javascript
this.$refs.documenteditor.ej2Instances.selection.sectionFormat.pageWidth = 500;
Expand All @@ -25,7 +25,8 @@ You can change the orientation of the page by swapping the values of page width

## Page margins

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.
Left and right page margins define the gap between the document content from the left and right sides of the page respectively. Top and bottom page margins define the gap between the document content from the header and footer of the page respectively.

Refer to the following sample code.

```javascript
Expand All @@ -35,7 +36,7 @@ this.$refs.documenteditor.ej2Instances.selection.sectionFormat.bottomMargin = 10
this.$refs.documenteditor.ej2Instances.selection.sectionFormat.topMargin = 10;
```

>Note: The maximum value of Margin is 1584, as per Microsoft Word application and you can set any value less than or equal to 1584 to this property. If you set any value greater than 1584, then Syncfusion Document editor will automatically reset as 1584.
N> The maximum value of margin is 1584, as per Microsoft Word application, and you can set any value less than or equal to 1584 to this property. If you set any value greater than 1584, then the Syncfusion Document Editor will automatically reset it to 1584.

## Header distance

Expand All @@ -57,7 +58,7 @@ this.$refs.documenteditor.ej2Instances.selection.sectionFormat.footerDistance =

You can define the number of columns, column width, and space between columns for the pages in a section.

The following code example illustrates how to define the two columns layout for the pages in a section.
The following code example illustrates how to define the two column layout for the pages in a section.

```javascript
let column = new SelectionColumnFormat(this.$refs.documenteditor.ej2Instances.selection);
Expand All @@ -67,38 +68,40 @@ this.$refs.documenteditor.ej2Instances.selection.sectionFormat.columns = [column
this.$refs.documenteditor.ej2Instances.selection.sectionFormat.lineBetweenColumns = true;
```

### Online Demo
### Online demo

Explore how to format Word documents with multiple columns using the Vue Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/vue/#/tailwind3/document-editor/multiple-columns.html).

## Breaks

You can insert Column break. The following code indicate that the text following the column break will begin in the next column.
You can insert a column break.

The following code indicates that the text following the column break will begin in the next column.

```javascript
this.$refs.documentEditor.ej2Instances.editor.insertColumnBreak();
```
```a next-page section break to start the new section on the next page.

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-ion on the next page.

The following code example illustrates how to insert a next page section break.

```javascript
this.$refs.documentEditor.ej2Instances.editor.insertSectionBreak(SectionBreakType.NewPage);
```

You can insert continuous section break to start the new section on the same page
You can insert a continuous section break to start the new section on the same page.

The following code example illustrates how to insert a continuous section break
The following code example illustrates how to insert a continuous section break.

```javascript
this.$refs.documentEditor.ej2Instances.editor.insertSectionBreak(SectionBreakType.Continuous);
```

## Online Demo
## Online demo

Explore how to apply section formatting in Word documents using the Vue Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/vue/#/tailwind3/document-editor/section-formatting.html).

## See Also
## See also

*[Page setup dialog](./dialog#page-setup-dialog)
* [Page setup dialog](./dialog#page-setup-dialog)
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
---
layout: post
title: Security Advisories in Vue Document Editor component | Syncfusion
title: Security Advisories in Vue DOCX Editor | Syncfusion
description: Learn here all about Security Advisories in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more.
control: Security advisories
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---

# Security Advisories in Syncfusion<sup style="font-size:70%">&reg;</sup> EJ2 Controls
# Security Advisories in Vue DOCX Editor

Syncfusion<sup style="font-size:70%">&reg;</sup> places the utmost priority on the security of our controls. Users can rest assured about the security of our controls, as we have implemented all necessary measures to mitigate security vulnerabilities such as cross-site scripting and insecure dependencies. To meet security standards, Syncfusion<sup style="font-size:70%">&reg;</sup> utilizes the [ESLint](https://eslint.org/) and [ESLint plugin security](https://github.com/eslint-community/eslint-plugin-security#rules) tools for static code analysis. Additionally, Syncfusion<sup style="font-size:70%">&reg;</sup> packages undergo software composition analysis using the [SOOS](https://soos.io/) security tool.
Syncfusion<sup style="font-size:70%">&reg;</sup> places the utmost priority on the security of our controls. Users can rest assured about the security of our controls, as we have implemented all necessary measures to mitigate security vulnerabilities such as cross-site scripting and insecure dependencies. To meet security standards, Syncfusion<sup style="font-size:70%">&reg;</sup> utilizes the [ESLint](https://eslint.org/) and [ESLint plugin security](https://github.com/eslint-community/eslint-plugin-security#rules) tools for static code analysis. Additionally, Syncfusion<sup style="font-size:70%">&reg;</sup> packages undergo software composition analysis using the SOOS security tool.

This document provides a description of the security updates available for Syncfusion<sup style="font-size:70%">&reg;</sup> Essential<sup style="font-size:70%">&reg;</sup> JS2 controls for volume release.

## Security Updates
## Security updates

The following security updates are available for Vue DocumentEditor control and are listed based on the release version.
The following security updates are available for [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) control and are listed based on the release version.

### 2024 Volume 2 (v26.2.4) - July 25, 2024

Expand All @@ -36,10 +36,10 @@ This release resolves critical and moderate security vulnerabilities affecting t

* The Npgsql package and Dynamic LINQ have been removed, as they are no longer required, to enhance security and mitigate the risk of SQL injection attacks.

## Common Security Updates
## Common security updates

For details on common security updates related to Syncfusion<sup style="font-size:70%">&reg;</sup> products, please refer to [this link](https://ej2.syncfusion.com/vue/documentation/common/security). This resource provides information on the latest advisories and best practices to help ensure the security and integrity of your applications.

## Security Issue
## Security issue

If users discover any security issues or need assistance in resolving them with Syncfusion<sup style="font-size:70%">&reg;</sup> controls, please contact us by creating a support ticket on [our support site](https://syncfusion.com/support) or by posting your query on Stack Overflow with the tag `syncfusion`<sup style="font-size:70%">&reg;</sup>`-ej2`.