DOC-3186: Update Blazor public documentation (#3724)
* Update Blazor Tiny Cloud page
* Add instructions for VS Code
* Update quick start content structure and add Zip instruction
* Update modules/ROOT/partials/integrations/blazor-quick-start.adoc
Co-authored-by: Karl Kemister-Sheppard <karlkemistersheppard@gmail.com>
* Update modules/ROOT/partials/integrations/blazor-quick-start.adoc
Co-authored-by: Karl Kemister-Sheppard <karlkemistersheppard@gmail.com>
* Update modules/ROOT/partials/integrations/blazor-quick-start.adoc
Co-authored-by: Karl Kemister-Sheppard <karlkemistersheppard@gmail.com>
* Update modules/ROOT/partials/integrations/blazor-quick-start.adoc
Co-authored-by: Karl Kemister-Sheppard <karlkemistersheppard@gmail.com>
* Update modules/ROOT/partials/integrations/blazor-quick-start.adoc
Co-authored-by: Karl Kemister-Sheppard <karlkemistersheppard@gmail.com>
* Update modules/ROOT/partials/integrations/blazor-quick-start.adoc
Co-authored-by: Karl Kemister-Sheppard <karlkemistersheppard@gmail.com>
* Update modules/ROOT/partials/integrations/blazor-quick-start.adoc
Co-authored-by: Karl Kemister-Sheppard <karlkemistersheppard@gmail.com>
* Add 'link:' prefix to hyperlinks
* Add step to include either the API key or License Key based on product source
* Update modules/ROOT/partials/integrations/blazor-postinstall.adoc
* Update modules/ROOT/partials/integrations/blazor-postinstall.adoc
* DOC-3186: replace your-api-key with no-api-key.
* Fix missing tag in example code
---------
Co-authored-by: Sorita Heng <sorita.heng@tiny.cloud>
Co-authored-by: Karl Kemister-Sheppard <karlkemistersheppard@gmail.com>
. Verify the installation by checking the `+ItemGroup+` references in `+BlazorApp.csproj+`, such as:
+
_File:_ `+BlazorApp.csproj+`
. Verify the installation by checking the `+ItemGroup+` references in the project file. For example, if the project is named _BlazorApp_, the relevant file would be `+BlazorApp.csproj+` with the dependency referenced as follows:
The location of the script depends on the type of Blazor app, including Blazor Server and Blazor WebAssembly (WASM) which are not covered in this guide.
* If using Blazor Server, add the script in `+Pages/_Host.cshtml+`, for example:
. Add the `+Editor+` component to a page by either:
. Add the `+Editor+` component to a page by either:
* Using the `+using+` directive
* Using the `+using+` directive:
+
+
[source,cs]
[source,cs]
----
----
@using TinyMCE.Blazor
@using TinyMCE.Blazor
<Editor />
<Editor />
----
----
* Using the full component and package name
+
For example:
+
_File:_ `+Pages/Index.razor+`
+
[source,cs]
----
@page "/"
@rendermode InteractiveServer
@using TinyMCE.Blazor
<h1>Hello, world!</h1>
<h2>Welcome to your new app.</h2>
<Editor />
----
* Using the component with its namespace:
+
+
[source,cs]
[source,cs]
----
----
@ -45,14 +72,38 @@ _File:_ `+Pages/Index.razor+`
[source,cs]
[source,cs]
----
----
@page "/"
@page "/"
@rendermode InteractiveServer
@using TinyMCE.Blazor
@using TinyMCE.Blazor
<h1>Hello, world!</h1>
<h1>Hello, world!</h1>
Welcome to your new app.
<h2>Welcome to your new app.</h2>
<Editor />
<Editor />
----
----
+
[IMPORTANT]
In a Blazor Web App, different render modes determine how components are rendered and how interactivity is handled. To enable JavaScript interactivity, ensure that `+@rendermode InteractiveServer+` is specified in a page component.
+
ifeval::["{productSource}" == "cloud"]
. Update the `+ApiKey+` option in the editor element and include your link:{accountsignup}/[{cloudname} API key].
+
[source,cs]
----
<Editor ApiKey="no-api-key" />
----
+
endif::[]
ifeval::["{productSource}" != "cloud"]
ifeval::["{productSource}" != "cloud"]
. Update the `+LicenseKey+` option in the editor element and include your xref:license-key.adoc[License Key].
+
[source,cs]
----
<Editor LicenseKey="your-license-key" />
----
+
. To load {productname} from the self-hosted package instead of the {cloudname}, configure the `+ScriptSrc+` property:
. To load {productname} from the self-hosted package instead of the {cloudname}, configure the `+ScriptSrc+` property:
The https://github.com/tinymce/tinymce-blazor[Official {productname} Blazor component] integrates {productname} into https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor[Blazor applications]. This procedure creates a basic Blazor application and adds a {productname} editor using the {productname} Blazor integration. The basic Blazor application is based on the following tutorial: https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/[Microsoft .NET Blazor Tutorial - Build your first Blazor app].
The link:https://github.com/tinymce/tinymce-blazor[Official {productname} Blazor component^] integrates {productname} into link:https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor[Blazor applications^]. This procedure creates a basic Blazor application and adds a {productname} editor using the {productname} Blazor integration. The basic Blazor application is based on the following tutorial: link:https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/[Microsoft .NET Blazor Tutorial - Build your first Blazor app^].
Select from the following guides:
Select from the following guides:
* xref:using-visual-studio-code[Using Visual Studio Code (VS Code)]
* xref:using-visual-studio[Using Visual Studio]
* xref:using-visual-studio[Using Visual Studio]
* xref:using-a-command-prompt-or-terminal[Using a command prompt or terminal]
* xref:using-a-command-prompt-or-terminal[Using a command prompt or terminal]
[[using-visual-studio-code]]
== Using Visual Studio Code (VS Code)
=== Prerequisites
This procedure requires:
* link:https://code.visualstudio.com/[Visual Studio Code (VS Code)^]
* link:https://learn.microsoft.com/en-us/visualstudio/subscriptions/vs-c-sharp-dev-kit[C# Dev Kit VS Code Extension^]
Alternatively, the link:https://learn.microsoft.com/en-us/dotnet/core/install/windows#install-with-visual-studio-code[.NET WinGet Configuration file^] can be downloaded to install the necessary dependencies.
=== Procedure
. In VS Code, open the Command Palette by pressing `+Ctrl+Shift+P+`. Find `.NET: New Project` and select it to create a new project.
. Select *Blazor Web App* from the list of templates and follow the steps to set up the project.
. Using the Command Palette, find and select `.NuGet: Add NuGet Package`. Enter `+TinyMCE.Blazor+` and select the package along with the version to install.
ifeval::["{productSource}" == "package-manager"]
. To use the self-hosted version of `{productname}`, install the `{productname}` package from the Command Pallette.
endif::[]
[[using-visual-studio]]
[[using-visual-studio]]
== Using Visual Studio
== Using Visual Studio
@ -12,13 +37,13 @@ Select from the following guides:
This will start a local development server, accessible at http://localhost:5000.
This will start a local development server accessible at `http://localhost:{PORT}`, where `{PORT}` is specified in the project's `+Properties/launchSettings.json+` file.
* To stop the development server, select on the command line or command prompt and press _Ctrl+C_.
* To stop the development server, select on the command line or command prompt and press _Ctrl+C_.
ifeval::["{productSource}" == "zip"]
== Download {productname} Zip
To use the self-hosted version of `{productname}`, download the link:https://www.tiny.cloud/my-account/downloads/[{productname} zip^]. Unzip the content and place it in the project, such as in the `+wwwroot+` folder for storing public static assets.
Sorita Heng
3 months ago