877298: Added documentation for preview sample of document editor container

ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-blob/document-editor.cs

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

ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-blob/razor

@@ -0,0 +1,16 @@
+@Html.EJS().Button("export").Content("Export").Render()
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditorContainer("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).Render()
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        container.resize();
+        document.getElementById('export').addEventListener('click', function () {
+            container.documentEditor.saveAsBlob('Docx');
+        });
+    }); 
+</script>

ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-blob/tagHelper

@@ -0,0 +1,16 @@
+<ejs-button id="export">Export</ejs-button>
+<div id="documenteditor" style="width:100%;height:100%">
+    <ejs-documenteditorcontainer id="container" isReadOnly=false enableEditor=true enableSelection=true enableSfdtExport=true></ejs-documenteditorcontainer> 
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        container.resize();
+        document.getElementById('export').addEventListener('click', function () {
+            container.documentEditor.saveAsBlob('Docx');
+        });
+    }); 
+</script>

ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-docx/document-editor.cs

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

ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-docx/razor

@@ -0,0 +1,16 @@
+@Html.EJS().Button("export").Content("Export").Render()
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditorContainer("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).Render()
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        container.resize();
+        document.getElementById('export').addEventListener('click', function () {
+            container.documentEditor.save('sample', 'Docx');
+        });
+    }); 
+</script>

ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-docx/tagHelper

@@ -0,0 +1,16 @@
+<ejs-button id="export">Export</ejs-button>
+<div id="documenteditor" style="width:100%;height:100%">
+    <ejs-documenteditorcontainer id="container" isReadOnly=false enableEditor=true enableSelection=true enableSfdtExport=true></ejs-documenteditorcontainer> 
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        container.resize();
+        document.getElementById('export').addEventListener('click', function () {
+            container.documentEditor.save('sample', 'Docx');
+        });
+    }); 
+</script>

ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-dotx/document-editor.cs

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

ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-dotx/razor

@@ -0,0 +1,16 @@
+@Html.EJS().Button("export").Content("Export").Render()
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditorContainer("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).Render()
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        container.resize();
+        document.getElementById('export').addEventListener('click', function () {
+            container.documentEditor.save('sample', 'Dotx');
+        });
+    }); 
+</script>

ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-dotx/tagHelper

@@ -0,0 +1,16 @@
+<ejs-button id="export">Export</ejs-button>
+<div id="documenteditor" style="width:100%;height:100%">
+    <ejs-documenteditorcontainer id="container" isReadOnly=false enableEditor=true enableSelection=true enableSfdtExport=true></ejs-documenteditorcontainer> 
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        container.resize();
+        document.getElementById('export').addEventListener('click', function () {
+            container.documentEditor.save('sample', 'Dotx');
+        });
+    }); 
+</script>

ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-sfdt/document-editor.cs

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

ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-sfdt/razor

@@ -0,0 +1,16 @@
+@Html.EJS().Button("export").Content("Export").Render()
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditorContainer("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).Render()
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        container.resize();
+        document.getElementById('export').addEventListener('click', function () {
+            container.documentEditor.save('sample', 'Sfdt');
+        });
+    }); 
+</script>

ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-sfdt/tagHelper

@@ -0,0 +1,16 @@
+<ejs-button id="export">Export</ejs-button>
+<div id="documenteditor" style="width:100%;height:100%">
+    <ejs-documenteditorcontainer id="container" isReadOnly=false enableEditor=true enableSelection=true enableSfdtExport=true></ejs-documenteditorcontainer> 
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        container.resize();
+        document.getElementById('export').addEventListener('click', function () {
+            container.documentEditor.save('sample', 'Sfdt');
+        });
+    }); 
+</script>

ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-txt/document-editor.cs

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

ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-txt/razor

@@ -0,0 +1,16 @@
+@Html.EJS().Button("export").Content("Export").Render()
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditorContainer("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).Render()
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        container.resize();
+        document.getElementById('export').addEventListener('click', function () {
+            container.documentEditor.save('sample', 'Txt');
+        });
+    }); 
+</script>

ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-txt/tagHelper

@@ -0,0 +1,16 @@
+<ejs-button id="export">Export</ejs-button>
+<div id="documenteditor" style="width:100%;height:100%">
+    <ejs-documenteditorcontainer id="container" isReadOnly=false enableEditor=true enableSelection=true enableSfdtExport=true></ejs-documenteditorcontainer> 
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        container.resize();
+        document.getElementById('export').addEventListener('click', function () {
+            container.documentEditor.save('sample', 'Txt');
+        });
+    }); 
+</script>

ej2-asp-core-mvc/document-editor/export.md

@@ -9,16 +9,16 @@ documentation: ug
 ---
 
 
-# Export in Document Editor Component
+# Export in Document Editor Component 
 
 Document editor exports the document into various known file formats in client-side such as Microsoft Word document (.docx), text document (.txt), and its own format called **Syncfusion Document Text (.sfdt)**.
 
 We are providing two types of save APIs  as mentioned below.
 
-|API name|Purpose|
-|--------|---------|
-|save(filename,FormatType):void<br>FormatType: Sfdt or Docx or Txt|Creates the document with specified file name and format type. Then, the created file is downloaded in the client browser by default.|
-|saveAsBlob(FormatType):Blob|Creates the document in specified format type and returns the created document as Blob.<br>This blob can be uploaded to your required server, database, or file path.|
+|API name|Purpose|Code Snippet for Document Editor|Code Snippet for Document Editor Container|
+|--------|---------|----------|----------|
+|save(filename,FormatType):void<br>FormatType: Sfdt or Docx or Txt|Creates the document with specified file name and format type. Then, the created file is downloaded in the client browser by default.|documenteditor.save('sample', 'Docx')|container.documentEditor.save('sample', 'Docx')|
+|saveAsBlob(FormatType):Blob|Creates the document in specified format type and returns the created document as Blob.<br>This blob can be uploaded to your required server, database, or file path.|documenteditor.saveAsBlob('Docx')|container.documentEditor.saveAsBlob('Docx')|
 
 ## Sfdt export
 
@@ -35,6 +35,15 @@ The following example shows how to export documents in document editor as Syncfu
 {% endhighlight %}
 {% endtabs %}
 
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/document-editor-container/export-container-sfdt/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Document-editor.cs" %}
+{% include code-snippet/document-editor-container/export-container-sfdt/document-editor.cs %}
+{% endhighlight %}
+{% endtabs %}
+
 {% elsif page.publishingplatform == "aspnet-mvc" %}
 
 {% tabs %}
@@ -47,6 +56,15 @@ The following example shows how to export documents in document editor as Syncfu
 {% endtabs %}
 {% endif %}
 
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/document-editor-container/export-container-sfdt/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Document-editor.cs" %}
+{% include code-snippet/document-editor-container/export-container-sfdt/document-editor.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
 
 
 N>To enable Sfdt export for a document editor instance, set [`enableSfdtExport`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DocumentEditor.DocumentEditor.html#Syncfusion_EJ2_DocumentEditor_DocumentEditor_EnableSfdtExport) to true.
@@ -66,6 +84,15 @@ The following example shows how to export the document as Word document (.docx).
 {% endhighlight %}
 {% endtabs %}
 
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/document-editor-container/export-container-docx/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Document-editor.cs" %}
+{% include code-snippet/document-editor-container/export-container-docx/document-editor.cs %}
+{% endhighlight %}
+{% endtabs %}
+
 {% elsif page.publishingplatform == "aspnet-mvc" %}
 
 {% tabs %}
@@ -78,6 +105,15 @@ The following example shows how to export the document as Word document (.docx).
 {% endtabs %}
 {% endif %}
 
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/document-editor-container/export-container-docx/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Document-editor.cs" %}
+{% include code-snippet/document-editor-container/export-container-docx/document-editor.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
 
 
 N>To enable word export for a document editor instance, set [`enableWordExport`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DocumentEditor.DocumentEditor.html#Syncfusion_EJ2_DocumentEditor_DocumentEditor_EnableWordExport) to true.
@@ -99,6 +135,15 @@ The following example shows how to export the document as Word Template (.dotx).
 {% endhighlight %}
 {% endtabs %}
 
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/document-editor-container/export-container-dotx/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Document-editor.cs" %}
+{% include code-snippet/document-editor-container/export-container-dotx/document-editor.cs %}
+{% endhighlight %}
+{% endtabs %}
+
 {% elsif page.publishingplatform == "aspnet-mvc" %}
 
 {% tabs %}
@@ -111,6 +156,16 @@ The following example shows how to export the document as Word Template (.dotx).
 {% endtabs %}
 {% endif %}
 
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/document-editor-container/export-container-dotx/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Document-editor.cs" %}
+{% include code-snippet/document-editor-container/export-container-dotx/document-editor.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
 ## Text export
 
 The following example shows how to export document as text document (.txt).
@@ -126,6 +181,15 @@ The following example shows how to export document as text document (.txt).
 {% endhighlight %}
 {% endtabs %}
 
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/document-editor-container/export-container-txt/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Document-editor.cs" %}
+{% include code-snippet/document-editor-container/export-container-txt/document-editor.cs %}
+{% endhighlight %}
+{% endtabs %}
+
 {% elsif page.publishingplatform == "aspnet-mvc" %}
 
 {% tabs %}
@@ -138,6 +202,16 @@ The following example shows how to export document as text document (.txt).
 {% endtabs %}
 {% endif %}
 
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/document-editor-container/export-container-txt/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Document-editor.cs" %}
+{% include code-snippet/document-editor-container/export-container-txt/document-editor.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
 
 
 N>To enable text export for a document editor instance, set [`enableTextExport`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DocumentEditor.DocumentEditor.html#Syncfusion_EJ2_DocumentEditor_DocumentEditor_EnableTextExport) to true.
@@ -155,6 +229,13 @@ Document editor also supports API to store the document into a blob.
 {% highlight c# tabtitle="Export-blob.cs" %}
 {% endhighlight %}{% endtabs %}
 
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/document-editor-container/export-container-blob/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Export-blob.cs" %}
+{% endhighlight %}{% endtabs %}
+
 {% elsif page.publishingplatform == "aspnet-mvc" %}
 
 {% tabs %}
@@ -165,6 +246,14 @@ Document editor also supports API to store the document into a blob.
 {% endhighlight %}{% endtabs %}
 {% endif %}
 
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/document-editor-container/export-container-blob/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Export-blob.cs" %}
+{% endhighlight %}{% endtabs %}
+{% endif %}
+
 
 
 For instance, to export the document as Rich Text Format file, implement an ASP.NET MVC web API controller using DocIO library by passing the DOCX blob.