Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 27 additions & 11 deletions modules/ROOT/partials/integrations/blazor-postinstall.adoc
Original file line number Diff line number Diff line change
@@ -1,23 +1,21 @@
. 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:
+
[source,xml]
----
<ItemGroup>
<PackageReference Include="TinyMCE.Blazor" Version="X.Y.Z" />
</ItemGroup>
----
. Add the `+tinymce-blazor.js+` script to the main page.
* If using the Blazor Web App, add the script in `+Components/App.razor+`, for example:
. Add the `+tinymce-blazor.js+` script to the main page. If using the Blazor Web App, add the script in `+Components/App.razor+`, for example:
+
[source,html]
----
<script src="_framework/blazor.web.js"></script>
<script src="_content/TinyMCE.Blazor/tinymce-blazor.js"></script>
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the wrong file name. It should be _content/TinyMCE.Blazor/TinyMce.Blazor.lib.module.js

----

+
[NOTE]
====
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:
Expand All @@ -34,17 +32,33 @@ The location of the script depends on the type of Blazor app, including Blazor S
<script src="_content/TinyMCE.Blazor/tinymce-blazor.js"></script>
<script src="_framework/blazor.webassembly.js"></script>
----
====
+

. Add the `+Editor+` component to a page by either:
* Using the `+using+` directive
. Add the `+Editor+` component to a page by either:
* Using the `+using+` directive:
+
[source,cs]
----
@using TinyMCE.Blazor
<Editor />
----
+
For example:
+
_File:_ `+Pages/Index.razor+`
+
[source,cs]
----
@page "/"
@rendermode InteractiveServer
@using TinyMCE.Blazor

<h1>Hello, world!</h1>
Welcome to your new app.
Comment thread
kemister85 marked this conversation as resolved.
Outdated
<Editor />
----
* Using the full component and package name
* Using the component with its namespace:
+
[source,cs]
----
Expand All @@ -64,9 +78,11 @@ _File:_ `+Pages/Index.razor+`
<h1>Hello, world!</h1>
Welcome to your new app.
<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.
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"]

Expand Down
25 changes: 24 additions & 1 deletion modules/ROOT/partials/integrations/blazor-quick-start.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,29 @@ Select from the following guides:
[[using-visual-studio-code]]
== Using Visual Studio Code (VS Code)

=== Prerequisites

This procedure requires:

* https://code.visualstudio.com/[Visual Studio Code (VS Code)^]
* https://dotnet.microsoft.com/en-us/download[.NET SDK^]
* https://learn.microsoft.com/en-us/visualstudio/subscriptions/vs-c-sharp-dev-kit[C# Dev Kit VS Code Extension^]
Comment thread
soritaheng marked this conversation as resolved.
Outdated

Alternatively, the 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.
Comment thread
soritaheng marked this conversation as resolved.
Outdated

=== 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.
Comment thread
soritaheng marked this conversation as resolved.
Outdated
endif::[]
include::partial$integrations/blazor-postinstall.adoc[]


[[using-visual-studio]]
== Using Visual Studio

Expand All @@ -22,7 +45,7 @@ This procedure requires:
=== Procedure

. On the Visual Studio toolbar, click the https://docs.microsoft.com/en-us/visualstudio/ide/create-new-project[*New Project* button].
Comment thread
soritaheng marked this conversation as resolved.
Outdated
. Select the *Blazor Web App* template and name the project 'BlazorApp'.
. Select the *Blazor Web App* template and follow the steps to set up the project.
. Use the NuGet package manager console to install the `+TinyMCE.Blazor+` package, such as:
+
[source,sh]
Expand Down