Skip to content

Commit ac69f4f

Browse files
kesavan-duraisamykesavan-duraisamy
authored
Merge pull request #2899 from syncfusion-content/877298-api-table
877298: Added documentation for preview sample of document editor container
2 parents 7f2186a + 36ae6dc commit ac69f4f

File tree

16 files changed

+279
-5
lines changed

16 files changed

+279
-5
lines changed

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
public ActionResult Default()
2+
{
3+
return View();
4+
}
5+

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@Html.EJS().Button("export").Content("Export").Render()
2+
<div id="documenteditor" style="width:100%;height:100%">
3+
@Html.EJS().DocumentEditorContainer("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).Render()
4+
</div>
5+
6+
<script>
7+
var documenteditor;
8+
document.addEventListener('DOMContentLoaded', function () {
9+
var documenteditorElement = document.getElementById("container");
10+
container = documenteditorElement.ej2_instances[0];
11+
container.resize();
12+
document.getElementById('export').addEventListener('click', function () {
13+
container.documentEditor.saveAsBlob('Docx');
14+
});
15+
});
16+
</script>

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<ejs-button id="export">Export</ejs-button>
2+
<div id="documenteditor" style="width:100%;height:100%">
3+
<ejs-documenteditorcontainer id="container" isReadOnly=false enableEditor=true enableSelection=true enableSfdtExport=true></ejs-documenteditorcontainer>
4+
</div>
5+
6+
<script>
7+
var documenteditor;
8+
document.addEventListener('DOMContentLoaded', function () {
9+
var documenteditorElement = document.getElementById("container");
10+
container = documenteditorElement.ej2_instances[0];
11+
container.resize();
12+
document.getElementById('export').addEventListener('click', function () {
13+
container.documentEditor.saveAsBlob('Docx');
14+
});
15+
});
16+
</script>

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
public ActionResult Default()
2+
{
3+
return View();
4+
}
5+

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@Html.EJS().Button("export").Content("Export").Render()
2+
<div id="documenteditor" style="width:100%;height:100%">
3+
@Html.EJS().DocumentEditorContainer("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).Render()
4+
</div>
5+
6+
<script>
7+
var documenteditor;
8+
document.addEventListener('DOMContentLoaded', function () {
9+
var documenteditorElement = document.getElementById("container");
10+
container = documenteditorElement.ej2_instances[0];
11+
container.resize();
12+
document.getElementById('export').addEventListener('click', function () {
13+
container.documentEditor.save('sample', 'Docx');
14+
});
15+
});
16+
</script>

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<ejs-button id="export">Export</ejs-button>
2+
<div id="documenteditor" style="width:100%;height:100%">
3+
<ejs-documenteditorcontainer id="container" isReadOnly=false enableEditor=true enableSelection=true enableSfdtExport=true></ejs-documenteditorcontainer>
4+
</div>
5+
6+
<script>
7+
var documenteditor;
8+
document.addEventListener('DOMContentLoaded', function () {
9+
var documenteditorElement = document.getElementById("container");
10+
container = documenteditorElement.ej2_instances[0];
11+
container.resize();
12+
document.getElementById('export').addEventListener('click', function () {
13+
container.documentEditor.save('sample', 'Docx');
14+
});
15+
});
16+
</script>

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
public ActionResult Default()
2+
{
3+
return View();
4+
}
5+

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@Html.EJS().Button("export").Content("Export").Render()
2+
<div id="documenteditor" style="width:100%;height:100%">
3+
@Html.EJS().DocumentEditorContainer("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).Render()
4+
</div>
5+
6+
<script>
7+
var documenteditor;
8+
document.addEventListener('DOMContentLoaded', function () {
9+
var documenteditorElement = document.getElementById("container");
10+
container = documenteditorElement.ej2_instances[0];
11+
container.resize();
12+
document.getElementById('export').addEventListener('click', function () {
13+
container.documentEditor.save('sample', 'Dotx');
14+
});
15+
});
16+
</script>

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<ejs-button id="export">Export</ejs-button>
2+
<div id="documenteditor" style="width:100%;height:100%">
3+
<ejs-documenteditorcontainer id="container" isReadOnly=false enableEditor=true enableSelection=true enableSfdtExport=true></ejs-documenteditorcontainer>
4+
</div>
5+
6+
<script>
7+
var documenteditor;
8+
document.addEventListener('DOMContentLoaded', function () {
9+
var documenteditorElement = document.getElementById("container");
10+
container = documenteditorElement.ej2_instances[0];
11+
container.resize();
12+
document.getElementById('export').addEventListener('click', function () {
13+
container.documentEditor.save('sample', 'Dotx');
14+
});
15+
});
16+
</script>

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
public ActionResult Default()
2+
{
3+
return View();
4+
}
5+

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@Html.EJS().Button("export").Content("Export").Render()
2+
<div id="documenteditor" style="width:100%;height:100%">
3+
@Html.EJS().DocumentEditorContainer("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).Render()
4+
</div>
5+
6+
<script>
7+
var documenteditor;
8+
document.addEventListener('DOMContentLoaded', function () {
9+
var documenteditorElement = document.getElementById("container");
10+
container = documenteditorElement.ej2_instances[0];
11+
container.resize();
12+
document.getElementById('export').addEventListener('click', function () {
13+
container.documentEditor.save('sample', 'Sfdt');
14+
});
15+
});
16+
</script>

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<ejs-button id="export">Export</ejs-button>
2+
<div id="documenteditor" style="width:100%;height:100%">
3+
<ejs-documenteditorcontainer id="container" isReadOnly=false enableEditor=true enableSelection=true enableSfdtExport=true></ejs-documenteditorcontainer>
4+
</div>
5+
6+
<script>
7+
var documenteditor;
8+
document.addEventListener('DOMContentLoaded', function () {
9+
var documenteditorElement = document.getElementById("container");
10+
container = documenteditorElement.ej2_instances[0];
11+
container.resize();
12+
document.getElementById('export').addEventListener('click', function () {
13+
container.documentEditor.save('sample', 'Sfdt');
14+
});
15+
});
16+
</script>

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
public ActionResult Default()
2+
{
3+
return View();
4+
}
5+

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@Html.EJS().Button("export").Content("Export").Render()
2+
<div id="documenteditor" style="width:100%;height:100%">
3+
@Html.EJS().DocumentEditorContainer("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).Render()
4+
</div>
5+
6+
<script>
7+
var documenteditor;
8+
document.addEventListener('DOMContentLoaded', function () {
9+
var documenteditorElement = document.getElementById("container");
10+
container = documenteditorElement.ej2_instances[0];
11+
container.resize();
12+
document.getElementById('export').addEventListener('click', function () {
13+
container.documentEditor.save('sample', 'Txt');
14+
});
15+
});
16+
</script>

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<ejs-button id="export">Export</ejs-button>
2+
<div id="documenteditor" style="width:100%;height:100%">
3+
<ejs-documenteditorcontainer id="container" isReadOnly=false enableEditor=true enableSelection=true enableSfdtExport=true></ejs-documenteditorcontainer>
4+
</div>
5+
6+
<script>
7+
var documenteditor;
8+
document.addEventListener('DOMContentLoaded', function () {
9+
var documenteditorElement = document.getElementById("container");
10+
container = documenteditorElement.ej2_instances[0];
11+
container.resize();
12+
document.getElementById('export').addEventListener('click', function () {
13+
container.documentEditor.save('sample', 'Txt');
14+
});
15+
});
16+
</script>

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

Lines changed: 94 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,16 @@ documentation: ug
99
---
1010

1111

12-
# Export in Document Editor Component
12+
# Export in Document Editor Component
1313

1414
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)**.
1515

1616
We are providing two types of save APIs as mentioned below.
1717

18-
|API name|Purpose|
19-
|--------|---------|
20-
|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.|
21-
|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.|
18+
|API name|Purpose|Code Snippet for Document Editor|Code Snippet for Document Editor Container|
19+
|--------|---------|----------|----------|
20+
|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')|
21+
|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')|
2222

2323
## Sfdt export
2424

@@ -35,6 +35,15 @@ The following example shows how to export documents in document editor as Syncfu
3535
{% endhighlight %}
3636
{% endtabs %}
3737

38+
{% tabs %}
39+
{% highlight cshtml tabtitle="CSHTML" %}
40+
{% include code-snippet/document-editor-container/export-container-sfdt/tagHelper %}
41+
{% endhighlight %}
42+
{% highlight c# tabtitle="Document-editor.cs" %}
43+
{% include code-snippet/document-editor-container/export-container-sfdt/document-editor.cs %}
44+
{% endhighlight %}
45+
{% endtabs %}
46+
3847
{% elsif page.publishingplatform == "aspnet-mvc" %}
3948

4049
{% tabs %}
@@ -47,6 +56,15 @@ The following example shows how to export documents in document editor as Syncfu
4756
{% endtabs %}
4857
{% endif %}
4958

59+
{% tabs %}
60+
{% highlight razor tabtitle="CSHTML" %}
61+
{% include code-snippet/document-editor-container/export-container-sfdt/razor %}
62+
{% endhighlight %}
63+
{% highlight c# tabtitle="Document-editor.cs" %}
64+
{% include code-snippet/document-editor-container/export-container-sfdt/document-editor.cs %}
65+
{% endhighlight %}
66+
{% endtabs %}
67+
{% endif %}
5068

5169

5270
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).
6684
{% endhighlight %}
6785
{% endtabs %}
6886

87+
{% tabs %}
88+
{% highlight cshtml tabtitle="CSHTML" %}
89+
{% include code-snippet/document-editor-container/export-container-docx/tagHelper %}
90+
{% endhighlight %}
91+
{% highlight c# tabtitle="Document-editor.cs" %}
92+
{% include code-snippet/document-editor-container/export-container-docx/document-editor.cs %}
93+
{% endhighlight %}
94+
{% endtabs %}
95+
6996
{% elsif page.publishingplatform == "aspnet-mvc" %}
7097

7198
{% tabs %}
@@ -78,6 +105,15 @@ The following example shows how to export the document as Word document (.docx).
78105
{% endtabs %}
79106
{% endif %}
80107

108+
{% tabs %}
109+
{% highlight razor tabtitle="CSHTML" %}
110+
{% include code-snippet/document-editor-container/export-container-docx/razor %}
111+
{% endhighlight %}
112+
{% highlight c# tabtitle="Document-editor.cs" %}
113+
{% include code-snippet/document-editor-container/export-container-docx/document-editor.cs %}
114+
{% endhighlight %}
115+
{% endtabs %}
116+
{% endif %}
81117

82118

83119
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).
99135
{% endhighlight %}
100136
{% endtabs %}
101137

138+
{% tabs %}
139+
{% highlight cshtml tabtitle="CSHTML" %}
140+
{% include code-snippet/document-editor-container/export-container-dotx/tagHelper %}
141+
{% endhighlight %}
142+
{% highlight c# tabtitle="Document-editor.cs" %}
143+
{% include code-snippet/document-editor-container/export-container-dotx/document-editor.cs %}
144+
{% endhighlight %}
145+
{% endtabs %}
146+
102147
{% elsif page.publishingplatform == "aspnet-mvc" %}
103148

104149
{% tabs %}
@@ -111,6 +156,16 @@ The following example shows how to export the document as Word Template (.dotx).
111156
{% endtabs %}
112157
{% endif %}
113158

159+
{% tabs %}
160+
{% highlight razor tabtitle="CSHTML" %}
161+
{% include code-snippet/document-editor-container/export-container-dotx/razor %}
162+
{% endhighlight %}
163+
{% highlight c# tabtitle="Document-editor.cs" %}
164+
{% include code-snippet/document-editor-container/export-container-dotx/document-editor.cs %}
165+
{% endhighlight %}
166+
{% endtabs %}
167+
{% endif %}
168+
114169
## Text export
115170

116171
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).
126181
{% endhighlight %}
127182
{% endtabs %}
128183

184+
{% tabs %}
185+
{% highlight cshtml tabtitle="CSHTML" %}
186+
{% include code-snippet/document-editor-container/export-container-txt/tagHelper %}
187+
{% endhighlight %}
188+
{% highlight c# tabtitle="Document-editor.cs" %}
189+
{% include code-snippet/document-editor-container/export-container-txt/document-editor.cs %}
190+
{% endhighlight %}
191+
{% endtabs %}
192+
129193
{% elsif page.publishingplatform == "aspnet-mvc" %}
130194

131195
{% tabs %}
@@ -138,6 +202,16 @@ The following example shows how to export document as text document (.txt).
138202
{% endtabs %}
139203
{% endif %}
140204

205+
{% tabs %}
206+
{% highlight razor tabtitle="CSHTML" %}
207+
{% include code-snippet/document-editor-container/export-container-txt/razor %}
208+
{% endhighlight %}
209+
{% highlight c# tabtitle="Document-editor.cs" %}
210+
{% include code-snippet/document-editor-container/export-container-txt/document-editor.cs %}
211+
{% endhighlight %}
212+
{% endtabs %}
213+
{% endif %}
214+
141215

142216

143217
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.
155229
{% highlight c# tabtitle="Export-blob.cs" %}
156230
{% endhighlight %}{% endtabs %}
157231

232+
{% tabs %}
233+
{% highlight cshtml tabtitle="CSHTML" %}
234+
{% include code-snippet/document-editor-container/export-container-blob/tagHelper %}
235+
{% endhighlight %}
236+
{% highlight c# tabtitle="Export-blob.cs" %}
237+
{% endhighlight %}{% endtabs %}
238+
158239
{% elsif page.publishingplatform == "aspnet-mvc" %}
159240

160241
{% tabs %}
@@ -165,6 +246,14 @@ Document editor also supports API to store the document into a blob.
165246
{% endhighlight %}{% endtabs %}
166247
{% endif %}
167248

249+
{% tabs %}
250+
{% highlight razor tabtitle="CSHTML" %}
251+
{% include code-snippet/document-editor-container/export-container-blob/razor %}
252+
{% endhighlight %}
253+
{% highlight c# tabtitle="Export-blob.cs" %}
254+
{% endhighlight %}{% endtabs %}
255+
{% endif %}
256+
168257

169258

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

0 commit comments

Comments
 (0)