Using TinyMCE from the Tiny Cloud CDN with the Blazor framework
The Official TinyMCE Blazor component integrates TinyMCE into Blazor applications. This procedure creates a basic Blazor application and adds a TinyMCE editor using the TinyMCE Blazor integration. The basic Blazor application is based on the following tutorial: Microsoft .NET Blazor Tutorial - Build your first Blazor app.
Select from the following guides:
Using Visual Studio
Procedure
-
On the Visual Studio toolbar, click the New Project button.
-
Select the Blazor Server App template.
-
Use the NuGet package manager console to install the
TinyMCE.Blazor
package, such as:Install-Package TinyMCE.Blazor
-
Verify the installation by checking the
ItemGroup
references inBlazorApp.csproj
, such as:File:
BlazorApp.csproj
<ItemGroup> <PackageReference Include="TinyMCE.Blazor" Version="X.Y.Z" /> </ItemGroup>
-
Add the
tinymce-blazor.js
script to the main page.-
Using Blazor Server add the script in
Pages/_Host.cshtml
, for example:<script src="_framework/blazor.server.js"></script> <script src="_content/TinyMCE.Blazor/tinymce-blazor.js"></script>
-
Using WASM add the script in
wwwroot/index.html
, for example:<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@using TinyMCE.Blazor <Editor />
-
Using the full component and package name
<TinyMCE.Blazor.Editor />
For example:
File:
Pages/Index.razor
@page "/" @using TinyMCE.Blazor <h1>Hello, world!</h1> Welcome to your new app. <Editor />
-
-
To test the application, run the application by pressing Ctrl+F5.
Using a command prompt or terminal
Procedure
-
Create a new Blazor project:
dotnet new blazorserver -o BlazorApp --no-https
-
Change into the new application directory:
cd BlazorApp
-
Install the TinyMCE Blazor integration:
dotnet add package TinyMCE.Blazor
-
Verify the installation by checking the
ItemGroup
references inBlazorApp.csproj
, such as:File:
BlazorApp.csproj
<ItemGroup> <PackageReference Include="TinyMCE.Blazor" Version="X.Y.Z" /> </ItemGroup>
-
Add the
tinymce-blazor.js
script to the main page.-
Using Blazor Server add the script in
Pages/_Host.cshtml
, for example:<script src="_framework/blazor.server.js"></script> <script src="_content/TinyMCE.Blazor/tinymce-blazor.js"></script>
-
Using WASM add the script in
wwwroot/index.html
, for example:<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@using TinyMCE.Blazor <Editor />
-
Using the full component and package name
<TinyMCE.Blazor.Editor />
For example:
File:
Pages/Index.razor
@page "/" @using TinyMCE.Blazor <h1>Hello, world!</h1> Welcome to your new app. <Editor />
-
-
Test the application using the .NET development server.
-
To start the development server, in the project’s root directory, run:
dotnet watch run
This will start a local development server, accessible at http://localhost:5000.
-
To stop the development server, select on the command line or command prompt and press Ctrl+C.
-