Skip to content
196 changes: 128 additions & 68 deletions Document-Processing/Word/Word-Processor/angular/getting-started.md

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Getting Started with Syncfusion Document Editor Control
description: Checkout and learn about getting started with Document Editor control of Syncfusion Essential JS 2 and more details.
description: Check out and learn about getting started with Document Editor control of Syncfusion Essential JS 2 and more details.
platform: document-processing
control: Getting Started Core
documentation: ug
Expand All @@ -18,8 +18,10 @@ This section briefly explains about how to include [ASP.NET Core DocumentEditor]

## Create ASP.NET Core web application with Razor pages

Create a new ASP.NET Core web application using one of the following methods:

* [Create a Project using Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/tutorials/razor-pages/razor-pages-start?view=aspnetcore-8.0&tabs=visual-studio#create-a-razor-pages-web-app)
* [Create a Project using Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core Extension](https://ej2.syncfusion.com/aspnetcore/documentation/getting-started/project-template)
* [Create a Project using Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core Extension](https://ej2.syncfusion.com/aspnetcore/documentation/getting-started/razor-pages)

## Install ASP.NET Core package in the application

Expand All @@ -36,6 +38,7 @@ Install-Package Syncfusion.EJ2.AspNet.Core -Version {{ site.releaseversion }}
N> Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core controls are available in [nuget.org.](https://www.nuget.org/packages?q=syncfusion.EJ2) Refer to [NuGet packages topic](https://ej2.syncfusion.com/aspnetcore/documentation/nuget-packages) to learn more about installing NuGet packages in various OS environments. The Syncfusion.EJ2.AspNet.Core NuGet package has dependencies, [Newtonsoft.Json](https://www.nuget.org/packages/Newtonsoft.Json/) for JSON serialization and [Syncfusion.Licensing](https://www.nuget.org/packages/Syncfusion.Licensing/) for validating Syncfusion<sup style="font-size:70%">&reg;</sup> license key.

## Add Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core Tag Helper

Open `~/Pages/_ViewImports.cshtml` file and import the `Syncfusion.EJ2` TagHelper.

{% tabs %}
Expand Down Expand Up @@ -84,9 +87,16 @@ Also, register the script manager `<ejs-script>` at the end of `<body>` in the A
{% endhighlight %}
{% endtabs %}

## Understanding component options

* **DocumentEditor**: A customizable component where you build the UI according to your specific requirements
* **DocumentEditorContainer**: A complete solution with a predefined toolbar, properties pane, and status bar for comprehensive document editing

This guide demonstrates both options.

## Add ASP.NET Core DocumentEditor control

Now, add the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core DocumentEditor tag helper in `~/Pages/Index.cshtml` page.
Add the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core DocumentEditor tag helper in `~/Pages/Index.cshtml` page.

{% tabs %}
{% highlight cshtml tabtitle="CSHTML" %}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Getting Started with ASP.NET MVC DocumentEditor | Syncfusion
description: Checkout and learn about getting started with ASP.NET MVC DocumentEditor control of Syncfusion Essential JS 2 and more details.
description: Check out and learn about getting started with ASP.NET MVC DocumentEditor control of Syncfusion Essential JS 2 and more details.
platform: document-processing
control: Getting Started
documentation: ug
Expand Down Expand Up @@ -73,14 +73,21 @@ Also, register the script manager `EJS().ScriptManager()` at the end of `<body>`
{% highlight cshtml tabtitle="~/_Layout.cshtml" %}

<body>
...
...
<!-- Syncfusion ASP.NET MVC Script Manager -->
@Html.EJS().ScriptManager()
</body>

{% endhighlight %}
{% endtabs %}

## Understanding component options

* **DocumentEditor** — a customizable control for building a tailored UI.
* **DocumentEditorContainer** — a complete container that includes a predefined toolbar, properties pane, and status bar for quick integration.

Choose the control that matches the required level of customization.

## Add ASP.NET MVC DocumentEditor control

Now, add the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC DocumentEditor control in `~/Views/Home/Index.cshtml` page.
Expand All @@ -99,7 +106,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/ASP-NET-MVC-Get

## See also

* [How to localize the Document Editor container](./global-local).
* [How to localize the Document editor container](./global-local).
* [How to load the document by default](./how-to/open-default-document).
* [How to customize tool bar](./how-to/customize-tool-bar).
* [How to resize Document editor component](./how-to/resize-document-editor).
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,6 @@ dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
dotnet restore

{% endhighlight %}

{% endtabs %}

N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
Expand Down Expand Up @@ -120,7 +119,7 @@ builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.

builder.Services.AddSyncfusionBlazor();
await builder.Build().RunAsync();
....
....

{% endhighlight %}
{% endtabs %}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
{% endhighlight %}
{% endtabs %}

N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages and component details.

{% endtabcontent %}

Expand All @@ -67,7 +67,6 @@ dotnet new blazorserver -o BlazorApp
cd BlazorApp

{% endhighlight %}

{% endtabs %}

## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor WordProcessor and Themes NuGet in the App
Expand All @@ -85,7 +84,6 @@ dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
dotnet restore

{% endhighlight %}

{% endtabs %}

N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
Expand Down
Loading