Skip to content

1043990: Updated 5 files in VUE DOCX Editor #4239

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
VijayalakshmiGSF4561 wants to merge 1 commit into
base: hotfix/hotfix-v34.2.2
Choose a base branch
from
Open

1043990: Updated 5 files in VUE DOCX Editor #4239

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
21 changes: 10 additions & 11 deletions Document-Processing/Word/Word-Processor/vue/feature-module.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,27 @@
---
layout: post
title: Feature module in Vue Document editor component | Syncfusion
description: Learn here all about Feature module in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more.
title: Feature module in Vue DOCX Editor component | Syncfusion
description: Learn here all about Feature module in Syncfusion Vue Document Editor component of Syncfusion Essential JS 2 and more.
control: Feature module
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---

# Feature module in Vue Document editor component
# Feature module in Vue Document Editor component

[Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) features are segregated into individual feature-wise modules to enable selective referencing. By default, the Document Editor displays the document in read-only mode. The required modules should be injected to extend its functionality. The following are the selective modules of Document Editor that can be included as required:
[Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) features are segregated into individual feature modules to enable selective referencing. By default, the Document Editor displays the document in read-only mode. The required modules should be injected to extend its functionality. The following are the selective modules of Document Editor that can be included as required:
* **Print** - Prints the document.
* **SfdtExport** - Exports the document as Vue Document Text (.SFDT) file.
* **Selection** - Selects a portion of the document and copy it to the clipboard.
* **Search** - Searches specific text and navigate between the results.
* **Selection** - Selects a portion of the document and copies it to the clipboard.
* **Search** - Searches specific text and navigates between the results.
* **WordExport** - Exports the document as Word Document (.DOCX) file.
* **TextExport** - Exports the document as Text Document (.TXT) file.
* **Editor** - Performs all kind of editing operations.
* **Editor** - Performs all kinds of editing operations.
* **EditorHistory** - Maintains the history of editing operations so that you can perform undo and redo at any time.
* User interface options such as context menu, options pane, image resizer, and dialog are available as individual modules.

>In addition to injecting the required modules in your application, enable corresponding properties to extend the functionality for a Document Editor instance.
Refer to the following table.
In addition to injecting the required modules in your application, enable corresponding properties to extend the functionality for a Document Editor instance. Refer to the following table.

| Module | Dependent modules to be injected for extending the functionality of Document Editor in your application | Property to enable the functionality for a Document Editor instance |
|---|---|---|
Expand All @@ -47,11 +46,11 @@ Refer to the following table.
|TableOfContentsDialog|`Selection, Editor, TableOfContentsDialog`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableTableOfContentsDialog='true'></ejs-documenteditor>`|
|ListDialog|`Selection, Editor, ListDialog`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableListDialog='true'></ejs-documenteditor>`|
|TablePropertiesDialog|`Selection, Editor, TablePropertiesDialog`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableTablePropertiesDialog='true'></ejs-documenteditor>`|
|CellOptionsDialog|`Selection, Editor, CellOptionsDialog`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableTablePropertiesDialog='true'></ejs-documenteditor>`|
|CellOptionsDialog|`Selection, Editor, CellOptionsDialog`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableCellOptionsDialog='true'></ejs-documenteditor>`|
|BordersAndShadingDialog|`Selection, Editor, BordersAndShadingDialog`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableBordersAndShadingDialog='true'></ejs-documenteditor>`|
|TableOptionsDialog|`Selection, Editor, TableOptionsDialog`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableTableOptionsDialog='true'></ejs-documenteditor>`|
|StylesDialog|`Selection, Editor, StylesDialog,StyleDialog`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableStyleDialog='true' :enableStylesDialog='true'></ejs-documenteditor>`|
|StyleDialog|`Selection, Editor, StyleDialog`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableStyleDialog='true'></ejs-documenteditor>`|
|BulletsAndNumberingDialog|`Selection, Editor, BulletsAndNumberingDialog`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableStyleDialog='true'></ejs-documenteditor>`|
|BulletsAndNumberingDialog|`Selection, Editor, BulletsAndNumberingDialog`|`<ejs-documenteditor :isReadOnly='false' :enableEditor='true' :enableBulletsAndNumberingDialog='true'></ejs-documenteditor>`|

These modules should be injected into the `provide` section and use `DocumentEditor` as a key of the object.
28 changes: 14 additions & 14 deletions Document-Processing/Word/Word-Processor/vue/fields.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
---
layout: post
title: Fields in Vue Document editor component | Syncfusion
description: Learn here all about Fields in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more.
title: Fields in Vue DOCX Editor component | Syncfusion
description: Learn here all about Fields in Syncfusion Vue Document Editor component of Syncfusion Essential JS 2 and more.
control: Fields
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---

# Fields in Vue Document editor component
# Fields in Vue Document Editor component

[Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) has preservation support for all types of fields in an existing word document without any data loss.

## Adding Fields

You can add a field to the document by using [`insertField`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor#insertfield) method in [`Editor`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor/) module.
You can add a field to the document by using [`insertField`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor#insertfield) method in [`Editor`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor) module.

The following example code illustrates how to insert merge field programmatically by providing the field code and field result.

Expand All @@ -24,44 +24,44 @@ let fieldResult: string = '«First Name»';
this.$refs.documenteditor.ej2Instances.editor.insertField(fieldCode, fieldResult);
```

>Note: Document editor does not validate/process the field code/field result. it simply inserts the field with specified field information.
>Note: Document Editor does not validate or process the field code and field result. It simply inserts the field with the specified field information.

## Update fields

Document Editor provides support for updating bookmark cross reference field. The following example code illustrates how to update bookmark cross reference field.
Document Editor provides support for updating bookmark cross-reference fields. The following example code illustrates how to update bookmark cross-reference fields.

```ts
//Update all the bookmark cross reference field in the document.
//Update all the bookmark cross-reference fields in the document.
this.$refs.documenteditor.ej2Instances.updateFields();
```

Bookmark cross reference fields can be updated through UI by using update fields option in `Toolbar`.
Bookmark cross-reference fields can be updated through UI by using the update fields option in `Toolbar`.

![Update bookmark cross reference field.](images/updatefields.png)

The following type of fields are automatically updated in Document Editor.
The following types of fields are automatically updated in Document Editor, independent of the bookmark cross-reference update above:

* NUMPAGES
* SECTION
* PAGE

## Get field info

You can get field code and field result of the current selected field by using [`getFieldInfo`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/selection#getfieldinfo) method in the [`Selection`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/selection/) module.
You can get field code and field result of the current selected field by using [`getFieldInfo`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/selection#getfieldinfo) method in the [`Selection`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/selection) module.

```ts
//Gets the field information of the selected field.
let fieldInfo: FieldInfo = this.$refs.documenteditor.ej2Instances.selection.getFieldInfo();
```

>Note: For nested fields, this method returns combined field code and result.
>Note: For nested fields, this method returns the combined field code and result.

## Set field info

You can modify the field code and field result of the current selected field by using [`setFieldInfo`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor#setfieldinfo) method in the [`Editor`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor/) module.
You can modify the field code and field result of the current selected field by using [`setFieldInfo`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor#setfieldinfo) method in the [`Editor`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/editor) module.

```ts
//Gets the field information for the selected field.
//Get the current field info before modifying it.
let fieldInfo: FieldInfo = this.$refs.documenteditor.ej2Instances.selection.getFieldInfo();

//Modify field code
Expand All @@ -74,7 +74,7 @@ fieldInfo.result = '«First Name»';
this.$refs.documenteditor.ej2Instances.editor.setFieldInfo(fieldInfo);
```

>Note: For nested field, entire field gets replaced completely with the specified field information.
>Note: For a nested field, the entire field gets replaced completely with the specified field information.

## See Also

Expand Down
46 changes: 23 additions & 23 deletions Document-Processing/Word/Word-Processor/vue/find-and-replace.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,28 @@
---
layout: post
title: Find and replace in Vue Document editor component | Syncfusion
description: Learn here all about Find and replace in Syncfusion Vue Document editor component of Syncfusion Essential JS 2 and more.
title: Find and replace in Vue DOCX Editor component | Syncfusion
description: Learn here all about Find and replace in Syncfusion Vue Document Editor component of Syncfusion Essential JS 2 and more.
control: Find and replace
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---

# Find and replace in Vue Document editor component
# Find and replace in Vue Document Editor component

The [Vue DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/vue-docx-editor) (Document Editor) component searches a portion of text in the document through a built-in interface called `OptionsPane` or rich APIs. When used in combination with selection performs various operations on the search results like replacing it with some other text, highlighting it, making it bolder, and more.

## Options pane

This provides the options to search for a portion of text in the document. After search operation is completed, the search results will be displayed in a list and options to navigate between them. The current occurrence of matched text or all occurrences with another text can be replaced by switching to `Replace` tab. This pane is opened using the keyboard shortcut `CTRL+F`. You can also open it programmatically using the following sample code.
This provides the options to search for a portion of text in the document. After a search operation is completed, the search results will be displayed in a list and options to navigate between them. The current occurrence of matched text or all occurrences with another text can be replaced by switching to `Replace` tab. This pane is opened using the keyboard shortcut `CTRL+F`. You can also open it programmatically using the following sample code.

{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}

<template>
<div id="app" height="350px">
<div>
<button v-on:click='showOptionsPane'>Save</button>
<button v-on:click='showOptionsPane'>Find/Replace</button>
</div>
<ejs-documenteditor ref="documenteditor" :enableEditor='true' :enableSearch='true' :enableOptionsPane='true'
:isReadOnly='false' height="370px" style="width: 100%;"></ejs-documenteditor>
Expand Down Expand Up @@ -73,7 +73,7 @@ onMounted(function () {
<template>
<div id="app" height="350px">
<div>
<button v-on:click='showOptionsPane'>Save</button>
<button v-on:click='showOptionsPane'>Find/Replace</button>
</div>
<ejs-documenteditor ref="documenteditor" :enableEditor='true' :enableSearch='true' :enableOptionsPane='true'
:isReadOnly='false' height="370px" style="width: 100%;"></ejs-documenteditor>
Expand Down Expand Up @@ -135,22 +135,22 @@ You can close the options pane by pressing `Esc` key.

## Search

The [`Search`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/search/) module of Document Editor exposes the following APIs:
The [`Search`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/search) module of Document Editor exposes the following APIs:

|API Name|Type |Description|
|---|---|---|
|[`findAll()`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/search#findall)| Method |Searches for specified text in the whole document and highlights it with yellow.|
|[`searchResults`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/search#searchresults) |Property |This is an instance of [`SearchResults`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/searchResults/).|
|[`searchResults`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/search#searchresults) |Property |This is an instance of [`SearchResults`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/searchResults).|
|[`find()`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/search#find) | Method |Find immediate occurrence of specified text from cursor position in the document and highlights it with yellow.|

### Find the immediate occurrence in the document

Using [`find()`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/search#find) method, you can find the immediate occurrence of specified text from current cursor position in the document.

The following example code illustrates how to use find in Document editor.
The following example code illustrates how to use find in Document Editor.

```ts
this.$refs.documenteditor.ej2instances.search.find('Some text', 'None');
this.$refs.documenteditor.ej2Instances.search.find('Some text', 'None');
```

>Note: Second parameter is optional parameter and it denotes find Options. Possible values of find options are `'None' |'WholeWord' |'CaseSensitive'| 'CaseSensitiveWholeWord'`.
Expand All @@ -159,17 +159,17 @@ this.$refs.documenteditor.ej2instances.search.find('Some text', 'None');

Using [`findAll()`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/search#findall) method, you can find all the occurrences of specified text in the whole document and highlight it with yellow.

The following example code illustrates how to find All the text in the document.
The following example code illustrates how to find all the text in the document.

```ts
this.$refs.documenteditor.ej2instances.search.findAll('Some text', 'None');
this.$refs.documenteditor.ej2Instances.search.findAll('Some text', 'None');
```

>Note: Second parameter is optional parameter and it denotes find Options. Possible values of find options are `'None' |'WholeWord' |'CaseSensitive'| 'CaseSensitiveWholeWord'`.

## Search results

The [`SearchResults`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/searchResults/) class provides information about the search results after a search operation is completed that can be identified using the [`searchResultsChange`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#searchresultschange) event. This will expose the following APIs:
The [`SearchResults`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/searchResults) class provides information about the search results after a search operation is completed that can be identified using the [`searchResultsChange`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#searchresultschange) event. This will expose the following APIs:

|API Name|Type |Description|
|---|---|---|
Expand All @@ -182,12 +182,12 @@ The [`SearchResults`](https://ej2.syncfusion.com/vue/documentation/api/document-

Using [`replaceAll`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/searchResults#replaceall), you can replace all the occurrences with specified text.

The following example code illustrates how to use replace All in Document editor.
The following example code illustrates how to use replace All in Document Editor.

```ts
this.$refs.documentEditor.ej2Instances.search.findAll ('Some text');
this.$refs.documenteditor.ej2Instances.search.findAll ('Some text');
// Replace all the searched text with word 'Mike'
this.$refs.documentEditor.ej2Instances.search.searchResults.replaceAll("Mike");
this.$refs.documenteditor.ej2Instances.search.searchResults.replaceAll("Mike");
```

### Replace
Expand All @@ -202,23 +202,23 @@ Using [`insertText`](https://ej2.syncfusion.com/vue/documentation/api/document-e
The following example code illustrates how to find a text in the document and replace each occurrence of the text one by one programmatically.

```ts
this.$refs.container.ej2instances.documentEditor.search.findAll('works');
this.$refs.container.ej2Instances.documentEditor.search.findAll('works');

let searchLength: number = container.documentEditor.search.searchResults.length;
let search_length: number = container.documentEditor.search.searchResults.length;

for (let i = searchLength - 1; i >= 0; i--) {
for (let i = search_length - 1; i >= 0; i--) {
// It will move selection to specific searched index,move to each occurrence one by one
this.$refs.container.ej2instances.documentEditor.search.searchResults.index = i;
this.$refs.container.ej2Instances.documentEditor.search.searchResults.index = i;
// Replace it with some text
this.$refs.container.ej2instances.documentEditor.editor.insertText('Hello');
this.$refs.container.ej2Instances.documentEditor.editor.insertText('Hello');
}

this.$refs.container.ej2Instances.documentEditor.search.searchResults.clear();
```

## SearchResultsChange event

[`DocumentEditor`](https://ej2.syncfusion.com/vue/documentation/api/document-editor/) exposes the [`searchResultsChange`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#searchresultschange)event that will be triggered whenever search results are changed. Consider the following scenarios:
[`DocumentEditor`](https://ej2.syncfusion.com/vue/documentation/api/document-editor) exposes the [`searchResultsChange`](https://ej2.syncfusion.com/vue/documentation/api/document-editor#searchresultschange)event that will be triggered whenever search results are changed. Consider the following scenarios:

* A search operation is completed with some results.
* The results are replaced with some other text, since it will be cleared automatically.
Expand All @@ -234,7 +234,7 @@ documenteditor.searchResultsChange = function() {

## Customize find and replace

Using the exposed APIs, you can customize the find and replace functionality in your application. Refer to the following sample code.
Using the exposed APIs, you can customize the find and replace functionality in your application. The following sample demonstrates how to combine `findAll` and `replaceAll` to search for a specific term and replace every occurrence in one operation. Refer to the following sample code.

{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
Expand Down
Loading