diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/accessibility.md b/Document-Processing/Word/Word-Processor/javascript-es5/accessibility.md index 24b0cc7d52..de8decabbd 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/accessibility.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/accessibility.md @@ -1,14 +1,14 @@ --- layout: post -title: Accessibility in JavaScript (ES5) Document editor | Syncfusion -description: Learn here all about Accessibility in Syncfusion JavaScript (ES5) Document editor component of Syncfusion Essential JS 2 and more. +title: Accessibility in JavaScript (ES5) DOCX Editor | Syncfusion +description: Learn here all about Accessibility in Syncfusion JavaScript (ES5) Document Editor component of Essential JS 2 and more. control: Accessibility platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Accessibility in JavaScript (ES5) Document editor component +# Accessibility in JavaScript (ES5) Document Editor component The accessibility compliance for the [JavaScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) component is outlined below. @@ -36,18 +36,20 @@ The accessibility compliance for the [JavaScript DOCX Editor](https://www.syncfu
No - The component does not meet the requirement.
-## Keyboard interaction +## Keyboard Accessibility -Document editor supports [keyboard shortcuts](./keyboard-shortcut). +For keyboard accessibility, the Document Editor supports a range of [keyboard shortcuts](./keyboard-shortcut) for navigation and editing without a mouse, including tab navigation, cursor movement, and shortcut key combinations for common editing actions such as copy, paste, undo, and redo. -## Ensuring accessibility +The following accessibility compliance summary applies to the Syncfusion JavaScript (ES5) Document Editor component. -The Document editor component's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing. +## Ensuring Accessibility -The accessibility compliance of the Document editor component is shown in the following sample. Open the [sample](https://ej2.syncfusion.com/accessibility/wordprocessor.html) in a new window to evaluate the accessibility of the Document editor component with accessibility tools. +The Document Editor component's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing. + +The accessibility compliance of the Document Editor component is shown in the following sample. Open the [sample](https://ej2.syncfusion.com/accessibility/wordprocessor.html) in a new window to evaluate the accessibility of the Document Editor component with accessibility tools. {% previewsample "/document-processing/code-snippet/document-editor/javascript-es5/accessibility-cs1" %} -## See also +## See Also -- [Accessibility in Syncfusion® Angular components](https://ej2.syncfusion.com/javascript/documentation/common/accessibility) \ No newline at end of file +- [Accessibility in Syncfusion® JavaScript components](https://ej2.syncfusion.com/javascript/documentation/common/accessibility) \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/bookmark.md b/Document-Processing/Word/Word-Processor/javascript-es5/bookmark.md index 4f43f0a649..6f48f39e1d 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/bookmark.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/bookmark.md @@ -1,14 +1,14 @@ --- layout: post -title: Bookmark in JavaScript (ES5) Document editor control | Syncfusion -description: Learn here all about Bookmark in Syncfusion JavaScript (ES5) Document editor control of Syncfusion Essential JS 2 and more. +title: Bookmark in JavaScript (ES5) DOCX Editor control | Syncfusion +description: Learn here all about Bookmark in Syncfusion JavaScript (ES5) Document Editor control of Syncfusion Essential JS 2 and more. platform: document-processing control: Bookmark documentation: ug domainurl: ##DomainURL## --- -# Bookmark in JavaScript (ES5) Document editor control +# Bookmark in JavaScript (ES5) Document Editor control Bookmark is a powerful tool that helps you to mark a place in the document to find again easily. You can enter many bookmarks in the document and give each one a unique name to identify easily. @@ -19,72 +19,76 @@ Bookmark is a powerful tool that helps you to mark a place in the document to fi ## Add bookmark -Using [`insertBookmark`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor/#insertbookmark) method, Bookmark can be added to the selected text. +Using [`insertBookmark`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#insertbookmark) method, Bookmark can be added to the selected text. -```c# -container.documentEditor.editor.insertBookmark("Bookmark1"); +```javascript +this.container.documentEditor.editor.insertBookmark("Bookmark1"); ``` ## Select Bookmark -You can select the bookmark in the document using [`selectBookmark`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/selection/#selectbookmark) method by providing Bookmark name to select as shown in the following code snippet. +You can select the bookmark in the document using [`selectBookmark`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/selection#selectbookmark) method by providing Bookmark name to select as shown in the following code snippet. -```c# -container.documentEditor.selection.selectBookmark("Bookmark1", true); +```javascript +this.container.documentEditor.selection.selectBookmark("Bookmark1", true); ``` ->Note: Second parameter is optional parameter and it denotes is exclude bookmark start and end from selection. If true, excludes bookmark start and end from selection. +N> Second parameter is optional parameter and it denotes is exclude bookmark start and end from selection. If true, excludes bookmark start and end from selection. ## Delete Bookmark -You can delete bookmark in the document using [`deleteBookmark`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor/#deletebookmark) method as shown in the following code snippet. +You can delete a bookmark in the document using [`deleteBookmark`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#deletebookmark) method as shown in the following code snippet. -```c# -container.documentEditor.editor.deleteBookmark("Bookmark1"); +```javascript +this.container.documentEditor.editor.deleteBookmark("Bookmark1"); ``` ## Get Bookmark from document -You can get all the bookmarks in the document using [`getBookmarks`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/#getbookmarks) method as shown in the following code snippet. +You can get all the bookmarks in the document using the [`getBookmarks`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#getbookmarks) method on the `DocumentEditor` instance as shown in the following code snippet. -```c# -container.documentEditor.getBookmarks(false); +```javascript +this.container.documentEditor.getBookmarks(false); ``` ->Note: Parameter denotes is include hidden bookmarks. If false, ignore hidden bookmark. +N> The boolean parameter denotes whether to include hidden bookmarks. If false, hidden bookmarks are ignored. ## Get Bookmark from selection -You can get bookmarks in current selection in the document using [`getBookmarks`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/selection/#getbookmarks) method as shown in the following code snippet. +You can get bookmarks in the current selection in the document using [`getBookmarks`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/selection#getbookmarks) method on the `Selection` instance as shown in the following code snippet. -```c# -container.documentEditor.selection.getBookmarks(false); +```javascript +this.container.documentEditor.selection.getBookmarks(false); ``` -## Replace bookmark content +## Show or Hide bookmark -You can replace bookmark content without removing the bookmark start and end for backtracking the bookmark content. +You can show or hide the bookmark indicators around bookmarked items in Document Editor component. -```c# -container.documentEditor.selection.selectBookmark("Bookmark1", true); -container.documentEditor.editor.insertText('Hello World') +The following example code illustrates how to show or hide the bookmark indicators around bookmarked items. + +```javascript +this.container.documentEditor.documentEditorSettings.showBookmarks = true; ``` -You can replace content by removing the bookmark start and end, thus the bookmark content can't be tracked in future. +## Replace bookmark content + +### Preserve the bookmark while replacing content -```c# -container.documentEditor.selection.selectBookmark("Bookmark1"); -container.documentEditor.editor.insertText('Hello World') -``` +When you pass `true` for the `excludeStartEnd` parameter in `selectBookmark`, the bookmark start and end markers are preserved. The subsequent `insertText` call replaces only the content between the markers, so the bookmark remains intact and can be tracked later. -## Show or Hide bookmark +```javascript +this.container.documentEditor.selection.selectBookmark("Bookmark1", true); +this.container.documentEditor.editor.insertText('Hello World'); +``` -You can show or hide the show square brackets around bookmarked items in Document editor component. +### Remove the bookmark while replacing content -The following example code illustrates how to show or hide square brackets around bookmarked items. +When you omit the `excludeStartEnd` parameter (or pass `false`), the bookmark start and end markers are included in the selection. The subsequent `insertText` call replaces both the content and the markers, so the bookmark is removed and cannot be tracked later. -```ts -container.documentEditorSettings.showBookmarks = true; +```javascript +this.container.documentEditor.selection.selectBookmark("Bookmark1"); +this.container.documentEditor.editor.insertText('Hello World'); ``` ## Bookmark Dialog @@ -105,7 +109,7 @@ The following example shows how to open bookmark dialog in Document Editor. ## Online Demo -Explore how to insert and manage bookmarks in Word documents using the JavaScript (ES5) Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/javascript-es5/#/material3/document-editor/links-and-bookmarks.html). +Explore how to insert and manage bookmarks in Word documents using the JavaScript (ES5) Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/javascript-es5/#/tailwind3/document-editor/links-and-bookmarks.html). ## See Also diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/chart.md b/Document-Processing/Word/Word-Processor/javascript-es5/chart.md index c16a789a62..fc8a558497 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/chart.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/chart.md @@ -1,18 +1,18 @@ --- layout: post -title: Chart in JavaScript (ES5) Document Editor Control | Syncfusion -description: Learn here all about Chart in Syncfusion JavaScript (ES5) Document editor control of Syncfusion Essential JS 2 and more. +title: Chart in JavaScript (ES5) DOCX Editor Component | Syncfusion +description: Learn here all about Chart in Syncfusion JavaScript (ES5) Document Editor control of Syncfusion Essential JS 2 and more. platform: document-processing control: Chart documentation: ug domainurl: ##DomainURL## --- -# Chart in JavaScript (ES5) Document Editor Control +# Chart in JavaScript (ES5) Document Editor Component -[JavaScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) provides chart preservation support. Using Document Editor, you can see the chart reports from your Word document. +[JavaScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) provides chart preservation support. Using the Document Editor, you can view chart reports from your Word document. -The following example shows chart preservation in Document Editor. +The following example shows chart preservation in the Document Editor. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -27,7 +27,7 @@ The following example shows chart preservation in Document Editor. ## Supported Chart Types -The following chart types are supported in Document Editor +The following chart types are supported in the Document Editor: * Scatter_Markers * Bubble * Area @@ -50,4 +50,4 @@ The following chart types are supported in Document Editor ## Online Demo -Explore how to preserve charts in Word documents using the JavaScript (ES5) Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/javascript-es5/#/material3/document-editor/chart.html). \ No newline at end of file +Explore how to preserve charts in Word documents using the JavaScript (ES5) Document Editor in this [live demo](https://document.syncfusion.com/demos/docx-editor/javascript-es5/#/tailwind3/document-editor/chart). \ No newline at end of file diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/clipboard.md b/Document-Processing/Word/Word-Processor/javascript-es5/clipboard.md index fc3f95cf7b..d6380420a1 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/clipboard.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/clipboard.md @@ -1,20 +1,20 @@ --- layout: post -title: Clipboard in JavaScript (ES5) Document editor control | Syncfusion -description: Learn here all about Clipboard in Syncfusion JavaScript (ES5) Document editor control of Syncfusion Essential JS 2 and more. +title: Clipboard in JavaScript (ES5) DOCX Editor Component | Syncfusion +description: Learn here all about Clipboard in Syncfusion JavaScript (ES5) DOCX Editor control of Syncfusion Essential JS 2 and more. platform: document-processing control: Clipboard documentation: ug domainurl: ##DomainURL## --- -# Clipboard in JavaScript (ES5) Document editor control +# Clipboard in JavaScript (ES5) Document Editor Component -[JavaScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) takes advantage of system clipboard and allows you to copy or move a portion of the document into it in HTML format, so that it can be pasted in any application that supports clipboard. +[JavaScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) takes advantage of the system clipboard and allows you to copy or move portions of the document to the clipboard in HTML format, so that it can be pasted into any application that supports clipboard operations. ## Copy -Copy a portion of document to system clipboard using built-in context menu of Document Editor. You can also do it programmatically using the following sample code. +Copy a portion of the document to the system clipboard using the built-in context menu of the Document Editor. You can also do it programmatically using the following sample code. ```ts documentEditor.selection.copy(); @@ -22,7 +22,7 @@ documentEditor.selection.copy(); ## Cut -Cut a portion of document to system clipboard using built-in context menu of Document Editor. You can also do it programmatically using the following sample code. +Cut a portion of the document to the system clipboard using the built-in context menu of the Document Editor. You can also do it programmatically using the following sample code. ```ts documentEditor.editor.cut(); @@ -30,15 +30,17 @@ documentEditor.editor.cut(); ## Paste -Due to limitations, you can paste contents from system clipboard in Document Editor only using the ‘CTRL + V’ keyboard shortcut. +Due to limitations, you can paste contents from the system clipboard into the Document Editor only using the **Ctrl + V** keyboard shortcut. ->Note: Due to browser limitation of getting content from system clipboard, paste using API and context menu option doesn't work. +N> Due to browser limitations of getting content from the system clipboard, paste using the API and context menu options doesn't work. ## Local paste (copy/paste within control) -Document Editor expose API to enable local paste within the control. On enabling this, the following is performed: -* Selected contents will be stored to an internal clipboard in addition to system clipboard. -* Clipboard paste will be overridden, and internally stored data (SFDT data) that has formatted text will be pasted using paste() API in Document editor. +Document Editor exposes an API to enable local paste within the control. When enabled, the following occurs: +* Selected contents will be stored to an internal clipboard as SFDT in addition to the system clipboard. +* Clipboard paste will be overridden, and the internally stored data (SFDT data) that has formatted text will be pasted using the `paste()` API in the Document Editor. + +### Enable Local Paste Refer to the following sample code. @@ -50,8 +52,7 @@ editor.enableLocalPaste = true; ``` By default, **enableLocalPaste** is false. - -When local paste is enabled for a Document Editor instance, you can paste contents programmatically if the internal clipboard has stored data during last copy operation. Refer to the following sample code. +When local paste is enabled for a document editor instance, you can paste contents programmatically if the internal clipboard has stored data during last copy operation. Refer to the following sample code. ```ts documentEditor.editor.paste(); @@ -59,10 +60,11 @@ documentEditor.editor.paste(); ### Paste options in context menu -In Document editor, paste options in context menu will be in disabled state if you were try to copy/paste content from outside of Document editor. It gets enabled when **enableLocalPaste** is true and trying to copy/paste content inside Document editor. +In the Document Editor, paste options in the context menu will be in a disabled state if you try to copy/paste content from outside of the Document Editor. It gets enabled when `enableLocalPaste` is `true` and you copy/paste content within the Document Editor. + +N> Due to browser limitations of getting content from the system clipboard, paste using the API and context menu options doesn't work. Hence, the paste option is disabled in the context menu. ->Note: Due to browser limitation of getting content from system clipboard, paste using API and context menu option doesn't work. Hence, the paste option is disabled in context menu. -Alternatively, you can use the keyboard shortcuts, +Alternatively, you can use the keyboard shortcuts: * Cut: Ctrl + X * Copy: Ctrl + C @@ -75,24 +77,23 @@ Alternatively, you can use the keyboard shortcuts, |True |Allows to paste content that is copied from the same Document Editor component alone and prevents pasting content from system clipboard. Hence the content copied from outside Document Editor component can’t be pasted.
Browser limitation of pasting from system clipboard using API and context menu options, will be resolved. So, you can copy and paste content within the Document Editor component using API and context menu options too.| |False|Allows to paste content from system clipboard. Hence the content copied from both the Document Editor component and outside can be pasted.
Browser limitation of pasting from system clipboard using API and context menu options, will remain as a limitation.| -Note: +N> * Keyboard shortcut for pasting will work properly in both cases. * Copying content from Document Editor component and pasting outside will work properly in both cases. ## Paste with formatting -Document Editor provides support to paste the system clipboard data with formatting. To enable clipboard paste with formatting options and copy/paste content from outside of Document editor, set the `enableLocalPaste` property in Document Editor to false and use this .NET Standard library [`Syncfusion.EJ2.WordEditor.AspNet.Core`]() by the web API service implementation. This library helps you to paste the system clipboard data with formatting. - -Refer this [page](./web-services-overview) for more details. +Document Editor provides support to paste the system clipboard data with formatting. To enable clipboard paste with formatting options, set the `enableLocalPaste` property in the Document Editor to `false` and use the `Syncfusion.EJ2.WordEditor.AspNet.Core` .NET Standard library for the ASP.NET Core web API service implementation. This library helps you to paste the system clipboard data with formatting. For details on setting up the web API service, refer to the [web services overview](./web-services-overview). You can paste your system clipboard data in the following ways: -* **Keep Source Formatting** This option retains the character styles and direct formatting applied to the copied text. Direct formatting includes characteristics such as font size, italics, or other formatting that is not included in the paragraph style. -* **Match Destination Formatting** This option discards most of the formatting applied directly to the copied text, but it retains the formatting applied for emphasis, such as bold and italic when it is applied to only a portion of the selection. The text takes on the style characteristics of the paragraph where it is pasted. The text also takes on any direct formatting or character style properties of text that immediately precedes the cursor when the text is pasted. -* **Text Only** This option discards all formatting and non-text elements such as pictures or tables. The text takes on the style characteristics of the paragraph where it is pasted and takes on any direct formatting or character style properties of text that immediately precedes the cursor when the text is pasted. Graphical elements are discarded and tables are converted to a series of paragraphs. -This paste option appear as follows. +* **Keep Source Formatting:** This option retains the character styles and direct formatting applied to the copied text. Direct formatting includes characteristics such as font size, italics, or other formatting that is not included in the paragraph style. +* **Match Destination Formatting:** This option discards most of the formatting applied directly to the copied text, but it retains the formatting applied for emphasis, such as bold and italic when it is applied to only a portion of the selection. The text takes on the style characteristics of the paragraph where it is pasted. The text also takes on any direct formatting or character style properties of text that immediately precedes the cursor when the text is pasted. +* **Text Only:** This option discards all formatting and non-text elements such as pictures or tables. The text takes on the style characteristics of the paragraph where it is pasted and takes on any direct formatting or character style properties of text that immediately precedes the cursor when the text is pasted. Graphical elements are discarded, and tables are converted to a series of paragraphs. + +This paste option appears as follows. -![Image](images/paste.PNG) +![Image](images/paste.png) N> When you paste content from an external source into the Document Editor, some formatting or elements may not appear as expected because certain elements are not supported. Refer [here](./unsupported-features) to learn more about unsupported elements. diff --git a/Document-Processing/Word/Word-Processor/javascript-es5/comments.md b/Document-Processing/Word/Word-Processor/javascript-es5/comments.md index bd0e7f0249..16be1870eb 100644 --- a/Document-Processing/Word/Word-Processor/javascript-es5/comments.md +++ b/Document-Processing/Word/Word-Processor/javascript-es5/comments.md @@ -1,23 +1,27 @@ --- layout: post -title: Comments in JavaScript (ES5) Document editor control | Syncfusion -description: Learn here all about Comments in Syncfusion JavaScript (ES5) Document editor control of Syncfusion Essential JS 2 and more. +title: Comments in JavaScript (ES5) DOCX Editor Component | Syncfusion +description: Learn here all about Comments in Syncfusion JavaScript (ES5) Document Editor control of Syncfusion Essential JS 2 and more. platform: document-processing control: Comments documentation: ug domainurl: ##DomainURL## --- -# Comments in JavaScript (ES5) Document editor control +# Comments in JavaScript (ES5) Document Editor Component [JavaScript DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor) (Document Editor) allows you to add comments to documents. You can add, navigate and remove comments in code and from the UI. +To know more about the comments in DocumentEditor component, you can check the video below. + +{% youtube "https://www.youtube.com/watch?v=Q8BYxr6OYHo" %} + ## Add a new comment Comments can be inserted to the selected text. ```js -//Add new commnt in the document. +//Add new comment in the document. documentEditor.editor.insertComment('Test comment'); ``` @@ -25,7 +29,7 @@ documentEditor.editor.insertComment('Test comment'); Comments can be inserted into the selected text with a specified date, author, and status [`insertComment`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#insertcomment). -{% highlight js %} +```js // In this example, a comment with the text "Hello world" // is added by the author Nancy Davolio on July 23, 2024, at 2:30 PM. // The isResolved status is set to false. @@ -43,13 +47,13 @@ var commentProperties = { // Insert the comment with the specified properties into the document editor. documentEditor.editor.insertComment('Hello world', commentProperties); -{% endhighlight %} +``` ## Add a Reply Comment with Date, Author, and Status Reply comments can be inserted into the parent comment with a specified date, author using [`insertReplyComment`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#insertreplycomment). -{% highlight js %} +```js // In this example, a comment with the text "Hello world" // is added by the author Nancy Davolio on July 23, 2024, at 2:30 PM. // The isResolved status is set to false. @@ -69,16 +73,16 @@ var commentProperties = { var comment = documentEditor.editor.insertComment('Hello world', commentProperties); // Insert a reply comment with specified properties into the Document Editor documentEditor.editor.insertReplyComment(comment.id, 'Hello world', commentProperties); -{% endhighlight %} +``` ## Get Comments -Document Editor allows to get the comments along with its reply and comment properties using [`getComments`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#getComments). +Document Editor allows you to get the comments along with their replies and comment properties using [`getComments`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#getComments). -{% highlight js %} +```js //Get Comments in the document along with the properties author, date, status. var commentInfo = container.documentEditor.getComments(); -{% endhighlight %} +``` ## Comment navigation @@ -96,10 +100,10 @@ documentEditor.selection.navigatePreviousComment(); ## Delete comment -Current comment can be be deleted using [`deleteComment`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#deletecomment). +Current comment can be deleted using [`deleteComment`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#deletecomment). -{% highlight js %} +```js //Delete the current selected comment. container.documentEditor.editor.deleteComment(); @@ -111,7 +115,7 @@ container.documentEditor.editor.deleteComment(commentinfo[0].id); //Delete the particular reply comment. container.documentEditor.editor.deleteComment(commentinfo[0].replies[0].id); -{% endhighlight %} +``` ## Delete all comment @@ -124,11 +128,11 @@ documentEditor.editor.deleteAllComments(); ## Protect the document in comments only mode -Document Editor provides support for protecting the document with `CommentsOnly` protection. In this protection, user allowed to add or edit comments alone in the document. +Document Editor provides support for protecting the document with `CommentsOnly` protection. In this protection, users are allowed to add or edit comments alone in the document. -Document editor provides an option to protect and unprotect document using [`enforceProtection`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#enforceprotection) and [`stopProtection`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#stopprotection) API. +Document Editor provides an option to protect and unprotect document using [`enforceProtection`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#enforceprotection) and [`stopProtection`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#stopprotection) API. -The following example code illustrates how to enforce and stop protection in Document editor container. +The following example code illustrates how to enforce and stop protection in Document Editor container. ```js @@ -137,7 +141,7 @@ var container = new ej.documenteditor.DocumentEditorContainer({ height: '590px' }); ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar); -container.serviceUrl = 'http://localhost:5000/api/documenteditor/'; +container.serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'; container.appendTo('#container'); //enforce protection @@ -152,13 +156,13 @@ Comment only protection can be enabled in UI by using [Restrict Editing pane](./ ![Enable comment only protection](images/commentsonly.png) ->Note: In enforce Protection method, first parameter denotes password and second parameter denotes protection type. Possible values of protection type are `NoProtection |ReadOnly |FormFieldsOnly |CommentsOnly`. In stop protection method, parameter denotes the password. +N> In the enforceProtection method, the first parameter denotes the password and the second parameter denotes the protection type. Possible values of protection type are `NoProtection |ReadOnly |FormFieldsOnly |CommentsOnly`. In the stopProtection method, the parameter denotes the password. ## Mention Support in comments Mention support displays a list of items that users can select or tag from the suggested list. To use this feature, type the @ character in the comment box and select or tag the user from the suggestion list. -The following example illustrates how to enable mention support in Document Editor +The following example illustrates how to enable mention support in the Document Editor ```js var mentionData = [ @@ -186,7 +190,7 @@ container.appendTo('#container'); ## Events -DocumentEditor provides [beforeCommentAction](https://ej2.syncfusion.com/javascript/documentation/api/document-editor-container#beforecommentaction) event, which is triggered on comment actions like Post, edit, reply, resolve and reopen. This event provides an opportunity to perform custom logic on comment actions like Post, edit, reply, resolve and reopen. The event handler receives the [CommentActionEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/commentActionEventArgs) object as an argument, which allows access to information about the comment. +DocumentEditor provides the [beforeCommentAction](https://ej2.syncfusion.com/javascript/documentation/api/document-editor-container#beforecommentaction) event, which is triggered on comment actions such as Post, edit, reply, resolve, and reopen. This event provides an opportunity to perform custom logic on these comment actions. The event handler receives the [CommentActionEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/commentActionEventArgs) object as an argument, which allows access to information about the comment. To demonstrate a specific use case, let’s consider an example where we want to restrict the delete functionality based on the author’s name. The following code snippet illustrates how to allow only the author of a comment to delete: @@ -202,15 +206,15 @@ var mentionData = [ mentionSettings: { dataSource: mentionData, fields: { text: 'Name' }}, } }); ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar); - documenteditorContainer.serviceUrl = 'http://localhost:6028/api/documenteditor/'; + documenteditorContainer.serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'; //DocumentEditorContainer control rendering starts documenteditorContainer.appendTo('#DocumentEditor'); documenteditorContainer.currentUser = "Guest User"; - // Event get triggerd on comment actions like Post, edit, reply, resolve and reopen + // Event is triggered on comment actions such as Post, edit, reply, resolve, and reopen function beforecomment(args){ - // Check the type and author of the comment and current user are different + // Check if the type is Delete and the author of the comment differs from the current user if(args.type === "Delete" && documenteditorContainer.currentUser !== args.author){ // Cancel the comment action args.cancel = true; @@ -222,4 +226,4 @@ var mentionData = [ ## Online Demo -Explore how to add, view, and manage comments in Word documents using the JavaScript (ES5) Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/javascript-es5/#/material3/document-editor/comments.html). \ No newline at end of file +Explore how to add, view, and manage comments in Word documents using the JavaScript (ES5) Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/javascript-es5/#/tailwind3/document-editor/comments.html). \ No newline at end of file