Added the save toolbar button to custom toolbar and auto save document.

ej2-asp-core-mvc/code-snippet/document-editor/add-save-button-in-toolbar/document-editor.cs

@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+

ej2-asp-core-mvc/code-snippet/document-editor/add-save-button-in-toolbar/razor

@@ -0,0 +1,23 @@
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditorContainer("container").Created("onDocCreate").EnableToolbar(true).Render()
+</div>
+
+<script>
+    function onDocCreate() {
+        var container = document.getElementById("container").ej2_instances[0];
+        var toolItem = {
+            prefixIcon: "e-save icon",
+            tooltipText: "Save the Document",
+            text: "Save",
+            id: "save"
+        };
+        container.toolbarItems = ['New','Open',toolItem, 'Separator' ,'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl'];
+        container.toolbarClick = function (args) {
+            switch (args.item.id) {
+                case 'save':
+                    container.documentEditor.save('sample','Docx');
+                    break;
+            }
+        };
+    }
+</script>

ej2-asp-core-mvc/code-snippet/document-editor/add-save-button-in-toolbar/tagHelper

@@ -0,0 +1,20 @@
+<ejs-documenteditorcontainer id="container" created="onDocCreate"></ejs-documenteditorcontainer>
+<script>
+    function onDocCreate() {
+        var container = document.getElementById("container").ej2_instances[0];
+        var toolItem = {
+            prefixIcon: "e-de-ctnr-lock",
+            tooltipText: "Disable Image",
+            text: "Disable Image",
+            id: "Custom"
+        };
+        container.toolbarItems = ['New','Open',toolItem, 'Separator' ,'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'Comments', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'Separator', 'Find', 'Separator', 'LocalClipboard', 'RestrictEditing'];
+        container.toolbarClick = function (args) {
+            switch (args.item.id) {
+                case 'Custom':
+                    container.documentEditor.save('Sample', 'Docx');
+                    break;
+            }
+        };
+    }
+</script>

ej2-asp-core-mvc/code-snippet/document-editor/auto-save-server/razor

@@ -0,0 +1,51 @@
+
+@Html.EJS().DocumentEditorContainer("container").Created("onCreate").EnableToolbar(true).Render()
+
+
+<script>
+    var container;
+    var containerPanel;
+    var contentChanged =false;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+    container = documenteditorElement.ej2_instances[0];
+    container.contentChange=function(){
+        contentChanged = true;
+    }
+    });
+    function onCreate() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        setInterval(() => {
+            if (contentChanged) {
+                //You can save the document as below
+                container.documentEditor.saveAsBlob('Docx').then((blob) => {
+                    console.log('Saved sucessfully');
+                    let exportedDocument = blob;
+                    //Now, save the document where ever you want.
+                    let formData = new FormData();
+                    formData.append('fileName', 'sample.docx');
+                    formData.append('data', exportedDocument);
+                    /* tslint:disable */
+                    var req = new XMLHttpRequest();
+                    // Replace your running Url here
+                    req.open(
+                        'POST',
+                        'http://localhost:62869/api/documenteditor/AutoSave',
+                        true
+                    );
+                    req.onreadystatechange = () => {
+                        if (req.readyState === 4) {
+                            if (req.status === 200 || req.status === 304) {
+                                console.log('Saved sucessfully');
+                            }
+                        }
+                    };
+                    req.send(formData);
+                });
+                contentChanged = false;
+            }
+        }, 1000);
+    }
+
+</script>

ej2-asp-core-mvc/code-snippet/document-editor/auto-save-server/tagHelper

@@ -0,0 +1,49 @@
+<ejs-documenteditorcontainer id="container" enableToolbar=true  height="590px"></ejs-documenteditorcontainer>
+
+<script>
+    var container;
+    var containerPanel;
+    var contentChanged =false;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+    container = documenteditorElement.ej2_instances[0];
+    container.contentChange=function(){
+        contentChanged = true;
+    }
+    });
+    function onCreate() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        setInterval(() => {
+            if (contentChanged) {
+                //You can save the document as below
+                container.documentEditor.saveAsBlob('Docx').then((blob) => {
+                    console.log('Saved sucessfully');
+                    let exportedDocument = blob;
+                    //Now, save the document where ever you want.
+                    let formData = new FormData();
+                    formData.append('fileName', 'sample.docx');
+                    formData.append('data', exportedDocument);
+                    /* tslint:disable */
+                    var req = new XMLHttpRequest();
+                    // Replace your running Url here
+                    req.open(
+                        'POST',
+                        'http://localhost:62869/api/documenteditor/AutoSave',
+                        true
+                    );
+                    req.onreadystatechange = () => {
+                        if (req.readyState === 4) {
+                            if (req.status === 200 || req.status === 304) {
+                                console.log('Saved sucessfully');
+                            }
+                        }
+                    };
+                    req.send(formData);
+                });
+                contentChanged = false;
+            }
+        }, 1000);
+    }
+
+</script>

ej2-asp-core-mvc/code-snippet/document-editor/custom-toolbar/razor

@@ -11,7 +11,7 @@
             text: "Disable Image",
             id: "Custom"
         };
-        container.toolbarItems = [toolItem, 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'Comments', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'Separator', 'Find', 'Separator', 'LocalClipboard', 'RestrictEditing'];
+        container.toolbarItems = [toolItem, 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl'];
         container.toolbarClick = function (args) {
             switch (args.item.id) {
                 case 'Custom':

ej2-asp-core-mvc/code-snippet/document-editor/custom-toolbar/tagHelper

@@ -8,7 +8,7 @@
             text: "Disable Image",
             id: "Custom"
         };
-        container.toolbarItems = [toolItem, 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'Comments', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'Separator', 'Find', 'Separator', 'LocalClipboard', 'RestrictEditing'];
+        container.toolbarItems = [toolItem, 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl'];
         container.toolbarClick = function (args) {
             switch (args.item.id) {
                 case 'Custom':

ej2-asp-core-mvc/document-editor/EJ2_ASP.MVC/getting-started.md

@@ -106,3 +106,4 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/ASP-NET-MVC-Get
 * [How to load the document by default](../document-editor/how-to/open-default-document).
 * [How to customize tool bar](../document-editor/how-to/customize-tool-bar).
 * [How to resize Document editor component](../document-editor/how-to/resize-document-editor).
+* [How to add a save button to the DocumentEditorContainer component toolbar](../document-editor/how-to/add-save-button-in-toolbar)

ej2-asp-core-mvc/document-editor/EJ2_ASP.NETCORE/getting-started-core.md

@@ -117,3 +117,4 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/ASP-NET-Core-Ge
 * [How to load the document by default](../document-editor/how-to/open-default-document).
 * [How to customize tool bar](../document-editor/how-to/customize-tool-bar).
 * [How to resize Document editor component](../document-editor/how-to/resize-document-editor).
+* [How to add a save button to the DocumentEditorContainer component toolbar](../document-editor/how-to/add-save-button-in-toolbar).

ej2-asp-core-mvc/document-editor/how-to/add-save-button-in-toolbar.md

@@ -0,0 +1,39 @@
+---
+layout: post
+title: Add save button in ##Platform_Name## Document Editor Component | Syncfusion
+description: Learn here to add save button in Syncfusion ##Platform_Name## Document Editor component of Syncfusion Essential JS 2 and more.
+platform: ej2-asp-core-mvc
+control: Add save button tool bar 
+publishingplatform: ##Platform_Name##
+documentation: ug
+---
+
+
+# Add save button in ##Platform_Name## Document editor toolbar
+
+## To add a save button to the existing toolbar in DocumentEditorContainer
+
+DocumentEditorContainer allows you to add a new button to the existing items in a toolbar using [`CustomToolbarItemModel`] and with existing items in [`toolbarItems`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DocumentEditor.DocumentEditorContainer.html#Syncfusion_EJ2_DocumentEditor_DocumentEditorContainer_ToolbarItems) property. Newly added item click action can be defined in [`toolbarclick`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DocumentEditor.DocumentEditorContainer.html#Syncfusion_EJ2_DocumentEditor_DocumentEditorContainer_ToolbarClick).
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/document-editor/add-save-button-in-toolbar/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Add-save-button-in-toolbar.cs" %}
+{% endhighlight %}{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/document-editor/add-save-button-in-toolbar/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Add-save-button-in-toolbar.cs" %}
+{% endhighlight %}{% endtabs %}
+{% endif %}
+
+
+
+N> Default value of `ToolbarItems` is `['New', 'Open', 'Separator', 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl']`.

ej2-asp-core-mvc/document-editor/how-to/auto-save-document.md

@@ -0,0 +1,60 @@
+---
+layout: post
+title: Auto Save Document in ##Platform_Name## Document Editor Component | Syncfusion
+description: Learn here all about Auto save document in document editor in Syncfusion ##Platform_Name## Document Editor component of syncfusion and more.
+platform: ej2-asp-core-mvc
+control: Auto Save Document In Document Editor
+publishingplatform: ##Platform_Name##
+documentation: ug
+---
+
+
+# Auto save document in ##Platform_Name## Document editor control
+
+In this article, we are going to see how to autosave the document to server. You can automatically save the edited content in regular intervals of time. It helps reduce the risk of data loss by saving an open document automatically at customized intervals.
+
+The following example illustrates how to auto save the document in server.
+
+* In the client-side, using content change event, we can automatically save the edited content in regular intervals of time. Based on `contentChanged` boolean, the document send as Docx format to server-side using [`saveAsBlob`] method.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/document-editor/auto-save-server/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Auto-save-server.cs" %}
+{% endhighlight %}{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/document-editor/auto-save-server/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Auto-save-server.cs" %}
+{% endhighlight %}{% endtabs %}
+{% endif %}
+
+
+
+* In server-side, Receives the stream content from client-side and process it to save the document in Server or Database from the received stream. Add Web API in controller file like below to save the document.
+
+```c#
+[AcceptVerbs("Post")]
+[HttpPost]
+[EnableCors("AllowAllOrigins")]
+[Route("AutoSave")]
+public string AutoSave()
+{
+    IFormFile file = HttpContext.Request.Form.Files[0];
+    Stream stream = new MemoryStream();    
+    file.CopyTo(stream);
+    //Save the stream to database or server as per the requirement.
+    stream.Close();
+    return "Sucess";
+}
+```
+
+## See Also
+* [Autosave document in DocumentEditor](../../document-editor/how-to/auto-save-document-in-document-editor)

ej2-asp-core-mvc/document-editor/how-to/customize-tool-bar.md

@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Customize Tool Bar in ##Platform_Name## Document Editor Component
+title: Customize Tool Bar in ##Platform_Name## Document Editor Component | Syncfusion
 description: Learn here all about how to customize Tool Bar in Syncfusion ##Platform_Name## Document Editor component of Syncfusion Essential JS 2 and more.
 platform: ej2-asp-core-mvc
 control: Customize Tool Bar
@@ -40,4 +40,4 @@ DocumentEditorContainer allows to customize (add, show, hide, enable, and disabl
 
 
 
-N> Default value of `ToolbarItems` is `['New', 'Open', 'Separator', 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'Comments', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'Separator', 'Find', 'Separator', 'LocalClipboard', 'RestrictEditing']`.
+N> Default value of `ToolbarItems` is `['New', 'Open', 'Separator', 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl']`.

ej2-asp-core-toc.html

@@ -924,6 +924,7 @@
 		<li><a href="/ej2-asp-core/document-editor/notes">Footnotes and Endnotes</a></li>
 		<li>How To
 		<ul>
+		<li><a href="/ej2-asp-core/document-editor/how-to/add-save-button-in-toolbar">Add save button in toolbar</a></li>
 		<li><a href="/ej2-asp-core/document-editor/how-to/override-the-keyboard-shortcuts">Override keyboard shortcuts</a></li>
 		<li><a href="/ej2-asp-core/document-editor/how-to/customize-context-menu">Customize context menu</a></li>
 		<li><a href="/ej2-asp-core/document-editor/how-to/customize-tool-bar">Customize toolbar</a></li>
@@ -939,6 +940,7 @@
 		<li><a href="/ej2-asp-core/document-editor/how-to/resize-document-editor">Resize document editor</a></li>
 		<li><a href="/ej2-asp-core/document-editor/how-to/export-document-as-pdf">Export the document as Pdf</a></li>
 		<li><a href="/ej2-asp-core/document-editor/how-to/customize-font-family-drop-down">Customize the font family drop down</a></li>
+		<li><a href="/ej2-asp-core/document-editor/how-to/auto-save-document">Auto save the document in Server</a></li>
 		<li><a href="/ej2-asp-core/document-editor/how-to/auto-save-document-in-document-editor">Auto save the document in AWS S3</a></li>
 		<li><a href="/ej2-asp-core/document-editor/how-to/retrieve-the-bookmark-content-as-text">Retrieve the Bookmark and Whole document content</a></li>
 		<li><a href="/ej2-asp-core/document-editor/how-to/get-current-word">Select and Get the Current Word and Paragraph</a></li>

ej2-asp-mvc-toc.html

@@ -873,6 +873,7 @@
 		<li><a href="/ej2-asp-mvc/document-editor/notes">Footnotes and Endnotes</a></li>
 		<li>How To
 		<ul>
+		<li><a href="/ej2-asp-mvc/document-editor/how-to/add-save-button-in-toolbar">Add save button in toolbar</a></li>
 		<li><a href="/ej2-asp-mvc/document-editor/how-to/override-the-keyboard-shortcuts">Override keyboard shortcuts</a></li>
 		<li><a href="/ej2-asp-mvc/document-editor/how-to/customize-context-menu">Customize context menu</a></li>
 		<li><a href="/ej2-asp-mvc/document-editor/how-to/customize-tool-bar">Customize toolbar</a></li>
@@ -888,6 +889,7 @@
 		<li><a href="/ej2-asp-mvc/document-editor/how-to/resize-document-editor">Resize document editor</a></li>
 		<li><a href="/ej2-asp-mvc/document-editor/how-to/export-document-as-pdf">Export the document as Pdf</a></li>
 		<li><a href="/ej2-asp-mvc/document-editor/how-to/customize-font-family-drop-down">Customize the font family drop down</a></li>
+		<li><a href="/ej2-asp-mvc/document-editor/how-to/auto-save-document">Auto save the document in Server</a></li>
 		<li><a href="/ej2-asp-mvc/document-editor/how-to/auto-save-document-in-document-editor">Auto save the document in AWS S3</a></li>
 		<li><a href="/ej2-asp-mvc/document-editor/how-to/retrieve-the-bookmark-content-as-text">Retrieve the Bookmark and Whole document content</a></li>
 		<li><a href="/ej2-asp-mvc/document-editor/how-to/get-current-word">Select and Get the Current Word and Paragraph</a></li>