Skip to content

Commit 68de7bd

Browse files
Sujitha2610Sujitha2610
committed
Merge branch '809971-JS5-revamp' of https://github.com/syncfusion-content/document-processing-docs into 809971-JS5-revamp
2 parents c431988 + 3ef42ed commit 68de7bd

10 files changed

Lines changed: 203 additions & 194 deletions

File tree

‎Document-Processing/Word/Word-Processor/javascript-es5/comments.md‎

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ Document Editor allows you to add comments to documents. You can add, navigate a
1616

1717
Comments can be inserted to the selected text.
1818

19-
```ts
19+
```js
2020
//Add new commnt in the document.
2121
documentEditor.editor.insertComment('Test comment');
2222
```
@@ -85,7 +85,7 @@ var commentInfo = container.documentEditor.getComments();
8585

8686
Next and previous comments can be navigated using the below code snippet.
8787

88-
```ts
88+
```js
8989
//Navigate to next comment
9090
documentEditor.selection.navigateNextComment();
9191

@@ -117,7 +117,7 @@ container.documentEditor.editor.deleteComment(commentinfo[0].replies[0].id);
117117

118118
All the comments in the document can be deleted using the below code snippet.
119119

120-
```ts
120+
```js
121121
//Delete all the comments present in the current document.
122122
documentEditor.editor.deleteAllComments();
123123
```
@@ -130,21 +130,22 @@ Document editor provides an option to protect and unprotect document using [`enf
130130

131131
The following example code illustrates how to enforce and stop protection in Document editor container.
132132

133-
```ts
134-
let container: DocumentEditorContainer = new DocumentEditorContainer({
133+
```js
134+
135+
var container = new ej.documenteditor.DocumentEditorContainer({
135136
enableToolbar: true,
136-
height: '590px',
137+
height: '590px'
137138
});
138-
DocumentEditorContainer.Inject(Toolbar);
139-
container.serviceUrl =
140-
'http://localhost:5000/api/documenteditor/';
139+
ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
140+
container.serviceUrl = 'http://localhost:5000/api/documenteditor/';
141141
container.appendTo('#container');
142142

143143
//enforce protection
144144
container.documentEditor.editor.enforceProtection('123', 'CommentsOnly');
145145

146146
//stop the document protection
147147
container.documentEditor.editor.stopProtection('123');
148+
148149
```
149150

150151
Comment only protection can be enabled in UI by using [Restrict Editing pane](./document-management#restrict-editing-pane)
@@ -159,21 +160,26 @@ Mention support displays a list of items that users can select or tag from the s
159160

160161
The following example illustrates how to enable mention support in Document Editor
161162

162-
```ts
163-
let mentionData: any = [
163+
```js
164+
var mentionData = [
164165
{ "Name": "Mary Kate", "EmailId": "marry@company.com" },
165166
{ "Name": "Andrew James", "EmailId": "james@company.com" },
166-
{ "Name": "Andrew Fuller", "EmailId": "andrew@company.com"}
167+
{ "Name": "Andrew Fuller", "EmailId": "andrew@company.com" }
167168
];
168-
let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true,height: '590px',
169-
// Enable mention support in document editor
170-
documentEditorSettings: {
171-
mentionSettings: { dataSource: mentionData, fields: { text: 'Name' }},
172-
}
169+
170+
var container = new ej.documenteditor.DocumentEditorContainer({
171+
enableToolbar: true,
172+
height: '590px',
173+
// Enable mention support in document editor
174+
documentEditorSettings: {
175+
mentionSettings: { dataSource: mentionData, fields: { text: 'Name' } }
176+
}
173177
});
174-
DocumentEditorContainer.Inject(Toolbar);
178+
179+
ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
175180
container.serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';
176181
container.appendTo('#container');
182+
177183
```
178184

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

‎Document-Processing/Word/Word-Processor/javascript-es5/export.md‎

Lines changed: 25 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -131,23 +131,19 @@ The following example shows how to export document as text document (.txt).
131131

132132
Document Editor also supports API to store the document into a blob. Refer to the following sample to export document into blob in client-side.
133133

134-
```ts
135-
import { DocumentEditor, FormatType, WordExport, SfdtExport } from '@syncfusion/ej2-documenteditor';
134+
```js
136135

137-
//Inject require modules for Export.
138-
DocumentEditor.Inject(WordExport, SfdtExport);
139-
140-
let documenteditor: DocumentEditor = new DocumentEditor({ enableSfdtExport: true, enableWordExport: true, enableTextExport: true });
136+
var documenteditor = new ej.documenteditor.DocumentEditor({ enableSfdtExport: true, enableWordExport: true, enableTextExport: true });
141137

142138
documenteditor.appendTo('#DocumentEditor');
143139

144140
documenteditor.open(sfdt);
145141

146-
document.getElementById('export').addEventListener('click', () => {
147-
//Export the current document as `Blob` object.
148-
documenteditor.saveAsBlob('Docx').then((exportedDocument: Blob) => {
149-
// The blob can be processed further
150-
});
142+
document.getElementById('export').addEventListener('click', function () {
143+
// Export the current document as `Blob` object.
144+
documenteditor.saveAsBlob('Docx').then(function (exportedDocument) {
145+
// The blob can be processed further
146+
});
151147
});
152148

153149
```
@@ -173,57 +169,57 @@ For instance, to export the document as Rich Text Format file, implement an ASP.
173169

174170
In client-side, you can consume this web service and save the document as Rich Text Format (.rtf) file. Refer to the following example.
175171

176-
```ts
177-
document.getElementById('export').addEventListener('click', () => {
178-
//Expor the document as `Blob` object.
179-
documenteditor.saveAsBlob('Docx').then((exportedDocument: Blob) => {
172+
```js
173+
document.getElementById('export').addEventListener('click', function () {
174+
// Expor the document as `Blob` object.
175+
documenteditor.saveAsBlob('Docx').then(function (exportedDocument) {
180176
// The blob can be processed further
181-
let formData: FormData = new FormData();
177+
var formData = new FormData();
182178
formData.append('fileName', 'sample.docx');
183179
formData.append('data', exportedDocument);
184180
saveAsRtf(formData);
185181
});
186182
});
187183

188-
function saveAsRtf(formData: FormData): void {
189-
//Send the blob object to server to process further.
190-
let httpRequest: XMLHttpRequest = new XMLHttpRequest();
184+
function saveAsRtf(formData) {
185+
// Send the blob object to server to process further.
186+
var httpRequest = new XMLHttpRequest();
191187
httpRequest.open('POST', '/api/DocumentEditor/ExportAsRtf', true);
192-
httpRequest.onreadystatechange = () => {
188+
httpRequest.onreadystatechange = function () {
193189
if (httpRequest.readyState === 4) {
194190
if (httpRequest.status === 200 || httpRequest.status === 304) {
195191
if (!(!navigator.msSaveBlob)) {
196192
navigator.msSaveBlob(httpRequest.response, 'sample.rtf');
197193
} else {
198-
let downloadLink: HTMLAnchorElement = document.createElementNS('http://www.w3.org/1999/xhtml', 'a') as HTMLAnchorElement;
194+
var downloadLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
199195
download('sample.rtf', 'rtf', httpRequest.response, downloadLink, 'download' in downloadLink);
200196
}
201197
} else {
202198
console.error(httpRequest.response);
203199
}
204200
}
205-
}
201+
};
206202
httpRequest.responseType = 'blob';
207203
httpRequest.send(formData);
208204
}
209205

210-
//Download the document in client side.
211-
function download(fileName: string, extension: string, buffer: Blob, downloadLink: HTMLAnchorElement, hasDownloadAttribute: Boolean): void {
206+
// Download the document in client side.
207+
function download(fileName, extension, buffer, downloadLink, hasDownloadAttribute) {
212208
if (hasDownloadAttribute) {
213209
downloadLink.download = fileName;
214-
let dataUrl: string = window.URL.createObjectURL(buffer);
210+
var dataUrl = window.URL.createObjectURL(buffer);
215211
downloadLink.href = dataUrl;
216-
let event: MouseEvent = document.createEvent('MouseEvent');
212+
var event = document.createEvent('MouseEvent');
217213
event.initEvent('click', true, true);
218214
downloadLink.dispatchEvent(event);
219-
setTimeout((): void => {
215+
setTimeout(function () {
220216
window.URL.revokeObjectURL(dataUrl);
221217
dataUrl = undefined;
222218
});
223219
} else {
224220
if (extension !== 'docx' && extension !== 'xlsx') {
225-
let url: string = window.URL.createObjectURL(buffer);
226-
let isPopupBlocked: Window = window.open(url, '_blank');
221+
var url = window.URL.createObjectURL(buffer);
222+
var isPopupBlocked = window.open(url, '_blank');
227223
if (!isPopupBlocked) {
228224
window.location.href = url;
229225
}

‎Document-Processing/Word/Word-Processor/javascript-es5/import.md‎

Lines changed: 39 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -48,46 +48,55 @@ You can convert word documents into SFDT format using the .NET Standard library
4848
4949
Please refer the following example for converting word documents into SFDT.
5050

51-
```ts
52-
import { DocumentEditor } from '@syncfusion/ej2-documenteditor';
53-
51+
```js
5452
// Initialize the Document Editor component.
55-
let documenteditor: DocumentEditor = new DocumentEditor();
56-
53+
var documenteditor = new ej.documenteditor.DocumentEditor();
5754
documenteditor.appendTo('#DocumentEditor');
5855

59-
document.getElementById('file_upload').setAttribute('accept', '.dotx,.docx,.docm,.dot,.doc,.rtf,.txt,.xml,.sfdt');
56+
// Limit accepted file types.
57+
document.getElementById('file_upload').setAttribute(
58+
'accept',
59+
'.dotx,.docx,.docm,.dot,.doc,.rtf,.txt,.xml,.sfdt'
60+
);
6061

61-
//Open file picker.
62-
document.getElementById("import").addEventListener("click", (): void => {
63-
document.getElementById('file_upload').click();
62+
// Open file picker on button click.
63+
document.getElementById('import').addEventListener('click', function () {
64+
document.getElementById('file_upload').click();
6465
});
6566

66-
document.getElementById('file_upload').addEventListener("change", (e: any): void => {
67-
if (e.target.files[0]) {
68-
//Get the selected file.
69-
let file = e.target.files[0];
70-
if (file.name.substr(file.name.lastIndexOf('.')) !== '.sfdt') {
71-
loadFile(file);
72-
}
67+
// Handle file selection.
68+
document.getElementById('file_upload').addEventListener('change', function (e) {
69+
if (e.target.files && e.target.files[0]) {
70+
var file = e.target.files[0];
71+
// If not already SFDT, send to server to convert.
72+
if (file.name.substr(file.name.lastIndexOf('.')) !== '.sfdt') {
73+
loadFile(file);
74+
} else {
75+
// If it's already SFDT, read and open directly.
76+
var reader = new FileReader();
77+
reader.onload = function () {
78+
documenteditor.open(reader.result);
79+
};
80+
reader.readAsText(file);
7381
}
82+
}
7483
});
7584

76-
function loadFile(file: File): void {
77-
let ajax: XMLHttpRequest = new XMLHttpRequest();
78-
ajax.open('POST', 'https://localhost:4000/api/documenteditor/Import', true);
79-
ajax.onreadystatechange = () => {
80-
if (ajax.readyState === 4) {
81-
if (ajax.status === 200 || ajax.status === 304) {
82-
//Open SFDT text in Document Editor
83-
documenteditor.open(ajax.responseText);
84-
}
85-
}
85+
// Send file to server to convert into SFDT and open the response.
86+
function loadFile(file) {
87+
var ajax = new XMLHttpRequest();
88+
ajax.open('POST', 'https://localhost:4000/api/documenteditor/Import', true);
89+
ajax.onreadystatechange = function () {
90+
if (ajax.readyState === 4) {
91+
if (ajax.status === 200 || ajax.status === 304) {
92+
// Open SFDT text in DocumentEditor.
93+
documenteditor.open(ajax.responseText);
94+
}
8695
}
87-
let formData: FormData = new FormData();
88-
formData.append('files', file);
89-
//Send the selected file to web api for converting it into sfdt.
90-
ajax.send(formData);
96+
};
97+
var formData = new FormData();
98+
formData.append('files', file);
99+
ajax.send(formData);
91100
}
92101
```
93102

‎Document-Processing/Word/Word-Processor/javascript-es5/link.md‎

Lines changed: 22 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -35,45 +35,44 @@ The following example illustrates how to add requestNavigate event for DocumentE
3535

3636
The following example illustrates how to add requestNavigate event for DocumentEditorContainer component.
3737

38-
```ts
39-
import { DocumentEditor, SfdtExport, Selection, RequestNavigateEventArgs } from '@syncfusion/ej2-documenteditor';
38+
```js
4039

41-
let hostUrl: string =
42-
'https://document.syncfusion.com/web-services/word-editor/';
40+
var hostUrl = 'https://document.syncfusion.com/web-services/word-editor/';
4341

44-
let container: DocumentEditorContainer = new DocumentEditorContainer({
45-
enableToolbar: true,
46-
height: '590px',
42+
var container = new ej.documenteditor.DocumentEditorContainer({
43+
enableToolbar: true,
44+
height: '590px'
4745
});
48-
DocumentEditorContainer.Inject(Toolbar);
46+
47+
ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
48+
4949
container.serviceUrl = hostUrl + 'api/documenteditor/';
5050
container.appendTo('#container');
5151

52-
// Add event listener for requestNavigate event to customize hyperlink navigation functionality
53-
container.documentEditor.requestNavigate = (args: RequestNavigateEventArgs) => {
54-
if (args.linkType !== 'Bookmark') {
55-
let link: string = args.navigationLink;
56-
if (args.localReference.length > 0) {
57-
link += '#' + args.localReference;
52+
container.documentEditor.requestNavigate = function (args) {
53+
if (args.linkType !== 'Bookmark') {
54+
var link = args.navigationLink;
55+
if (args.localReference.length > 0) {
56+
link += '#' + args.localReference;
57+
}
58+
window.open(link);
59+
args.isHandled = true;
5860
}
59-
//Navigate to the selected URL.
60-
window.open(link);
61-
args.isHandled = true;
62-
}
6361
};
62+
6463
```
6564

6665
If the selection is in hyperlink, trigger this event by calling ‘navigateHyperlink’ method of ‘Selection’ instance. Refer to the following example.
6766

68-
```ts
67+
```js
6968
documenteditor.selection.navigateHyperlink();
7069
```
7170

7271
## Copy link
7372

7473
Document Editor copies link text of a hyperlink field to the clipboard if the selection is in hyperlink. Refer to the following example.
7574

76-
```ts
75+
```js
7776
documenteditor.selection.copyHyperlink();
7877
```
7978

@@ -104,15 +103,15 @@ Also Document Editor expose API [`insertHyperlink()`](https://ej2.syncfusion.com
104103

105104
Refer to the following sample code.
106105

107-
```ts
106+
```js
108107
documenteditor.editor.insertHyperlink('https://www.google.com', 'Google');
109108
```
110109

111110
## Customize screen tip
112111

113112
You can customize the screen tip text for the hyperlink by using below sample code.
114113

115-
```ts
114+
```js
116115
documenteditor.editor.insertHyperlink('https://www.google.com', 'Google', '<<Screen tip text>>');
117116
```
118117

@@ -124,7 +123,7 @@ Screen tip text can be modified through UI by using the [Hyperlink dialog](./dia
124123

125124
To remove link from hyperlink in the document, press Backspace key at the end of a hyperlink. By removing the link, it will be converted as plain text. You can use ‘removeHyperlink’ method of ‘Editor’ instance if the selection is in hyperlink. Refer to the following example.
126125

127-
```ts
126+
```js
128127
documenteditor.editor.removeHyperlink();
129128
```
130129

0 commit comments

Comments
 (0)