Skip to content

Commit 32ee70c

Browse files
soritahengSorita Hengkemister85
authored
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 <[email protected]> * Update modules/ROOT/partials/integrations/blazor-quick-start.adoc Co-authored-by: Karl Kemister-Sheppard <[email protected]> * Update modules/ROOT/partials/integrations/blazor-quick-start.adoc Co-authored-by: Karl Kemister-Sheppard <[email protected]> * Update modules/ROOT/partials/integrations/blazor-quick-start.adoc Co-authored-by: Karl Kemister-Sheppard <[email protected]> * Update modules/ROOT/partials/integrations/blazor-quick-start.adoc Co-authored-by: Karl Kemister-Sheppard <[email protected]> * Update modules/ROOT/partials/integrations/blazor-quick-start.adoc Co-authored-by: Karl Kemister-Sheppard <[email protected]> * Update modules/ROOT/partials/integrations/blazor-quick-start.adoc Co-authored-by: Karl Kemister-Sheppard <[email protected]> * 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 <[email protected]> Co-authored-by: Karl Kemister-Sheppard <[email protected]>
1 parent 0864aa4 commit 32ee70c

File tree

3 files changed

+109
-23
lines changed

3 files changed

+109
-23
lines changed

‎modules/ROOT/partials/integrations/blazor-postinstall.adoc‎

Lines changed: 61 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,64 @@
1-
. Verify the installation by checking the `+ItemGroup+` references in `+BlazorApp.csproj+`, such as:
2-
+
3-
_File:_ `+BlazorApp.csproj+`
1+
. 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:
42
+
53
[source,xml]
64
----
75
<ItemGroup>
86
<PackageReference Include="TinyMCE.Blazor" Version="X.Y.Z" />
97
</ItemGroup>
108
----
11-
. Add the `+tinymce-blazor.js+` script to the main page.
12-
* Using Blazor Server add the script in `+Pages/_Host.cshtml+`, for example:
9+
. 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:
10+
+
11+
[source,html]
12+
----
13+
<script src="_framework/blazor.web.js"></script>
14+
<script src="_content/TinyMCE.Blazor/tinymce-blazor.js"></script>
15+
----
16+
+
17+
[NOTE]
18+
====
19+
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.
20+
21+
* If using Blazor Server, add the script in `+Pages/_Host.cshtml+`, for example:
1322
+
1423
[source,html]
1524
----
1625
<script src="_framework/blazor.server.js"></script>
1726
<script src="_content/TinyMCE.Blazor/tinymce-blazor.js"></script>
1827
----
19-
* Using WASM add the script in `+wwwroot/index.html+`, for example:
28+
* If using WASM, add the script in `+wwwroot/index.html+`, for example:
2029
+
2130
[source,html]
2231
----
2332
<script src="_content/TinyMCE.Blazor/tinymce-blazor.js"></script>
2433
<script src="_framework/blazor.webassembly.js"></script>
2534
----
26-
. Add the `+Editor+` component to a page by either:
27-
* Using the `+using+` directive
35+
====
36+
+
37+
38+
. Add the `+Editor+` component to a page by either:
39+
* Using the `+using+` directive:
2840
+
2941
[source,cs]
3042
----
3143
@using TinyMCE.Blazor
3244
<Editor />
3345
----
34-
* Using the full component and package name
46+
+
47+
For example:
48+
+
49+
_File:_ `+Pages/Index.razor+`
50+
+
51+
[source,cs]
52+
----
53+
@page "/"
54+
@rendermode InteractiveServer
55+
@using TinyMCE.Blazor
56+
57+
<h1>Hello, world!</h1>
58+
<h2>Welcome to your new app.</h2>
59+
<Editor />
60+
----
61+
* Using the component with its namespace:
3562
+
3663
[source,cs]
3764
----
@@ -45,14 +72,38 @@ _File:_ `+Pages/Index.razor+`
4572
[source,cs]
4673
----
4774
@page "/"
75+
@rendermode InteractiveServer
4876
@using TinyMCE.Blazor
4977
5078
<h1>Hello, world!</h1>
51-
Welcome to your new app.
79+
<h2>Welcome to your new app.</h2>
5280
<Editor />
81+
----
82+
+
83+
[IMPORTANT]
84+
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.
85+
+
86+
87+
ifeval::["{productSource}" == "cloud"]
88+
. Update the `+ApiKey+` option in the editor element and include your link:{accountsignup}/[{cloudname} API key].
89+
90+
+
91+
[source,cs]
5392
----
93+
<Editor ApiKey="no-api-key" />
94+
----
95+
+
96+
endif::[]
5497

5598
ifeval::["{productSource}" != "cloud"]
99+
. Update the `+LicenseKey+` option in the editor element and include your xref:license-key.adoc[License Key].
100+
101+
+
102+
[source,cs]
103+
----
104+
<Editor LicenseKey="your-license-key" />
105+
----
106+
+
56107
57108
. To load {productname} from the self-hosted package instead of the {cloudname}, configure the `+ScriptSrc+` property:
58109
+

‎modules/ROOT/partials/integrations/blazor-quick-start.adoc‎

Lines changed: 46 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,49 @@
1-
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].
1+
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^].
22

33
Select from the following guides:
44

5+
* xref:using-visual-studio-code[Using Visual Studio Code (VS Code)]
56
* xref:using-visual-studio[Using Visual Studio]
67
* xref:using-a-command-prompt-or-terminal[Using a command prompt or terminal]
78
9+
[[using-visual-studio-code]]
10+
== Using Visual Studio Code (VS Code)
11+
12+
=== Prerequisites
13+
14+
This procedure requires:
15+
16+
* link:https://code.visualstudio.com/[Visual Studio Code (VS Code)^]
17+
* link:https://dotnet.microsoft.com/en-us/download[.NET SDK^]
18+
* link:https://learn.microsoft.com/en-us/visualstudio/subscriptions/vs-c-sharp-dev-kit[C# Dev Kit VS Code Extension^]
19+
20+
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.
21+
22+
=== Procedure
23+
24+
. In VS Code, open the Command Palette by pressing `+Ctrl+Shift+P+`. Find `.NET: New Project` and select it to create a new project.
25+
. Select *Blazor Web App* from the list of templates and follow the steps to set up the project.
26+
. Using the Command Palette, find and select `.NuGet: Add NuGet Package`. Enter `+TinyMCE.Blazor+` and select the package along with the version to install.
27+
28+
ifeval::["{productSource}" == "package-manager"]
29+
30+
. To use the self-hosted version of `{productname}`, install the `{productname}` package from the Command Pallette.
31+
endif::[]
32+
833
[[using-visual-studio]]
934
== Using Visual Studio
1035

1136
=== Prerequisites
1237

1338
This procedure requires:
1439

15-
* https://docs.microsoft.com/en-us/visualstudio/windows/[Microsoft Visual Studio]
16-
* https://docs.microsoft.com/en-us/dotnet/core/install/[Microsoft .NET]
40+
* link:https://docs.microsoft.com/en-us/visualstudio/windows/[Microsoft Visual Studio^]
41+
* link:https://docs.microsoft.com/en-us/dotnet/core/install/[Microsoft .NET^]
1742

1843
=== Procedure
1944

20-
. On the Visual Studio toolbar, click the https://docs.microsoft.com/en-us/visualstudio/ide/create-new-project[*New Project* button].
21-
. Select the *Blazor Server App* template.
45+
. On the Visual Studio toolbar, click the link:https://docs.microsoft.com/en-us/visualstudio/ide/create-new-project[*New Project* button^].
46+
. Select the *Blazor Web App* template and follow the steps to set up the project.
2247
. Use the NuGet package manager console to install the `+TinyMCE.Blazor+` package, such as:
2348
+
2449
[source,sh]
@@ -36,9 +61,8 @@ Install-Package TinyMCE
3661
----
3762

3863
endif::[]
39-
include::partial$integrations/blazor-postinstall.adoc[]
4064

41-
. To test the application, run the application by pressing *Ctrl+F5*.
65+
. To test the application, run the application by pressing `+Ctrl+F5+`.
4266

4367
[[using-a-command-prompt-or-terminal]]
4468
== Using a command prompt or terminal
@@ -47,15 +71,15 @@ include::partial$integrations/blazor-postinstall.adoc[]
4771

4872
This procedure requires:
4973

50-
* https://docs.microsoft.com/en-us/dotnet/core/install/[Microsoft .NET]
74+
* link:https://docs.microsoft.com/en-us/dotnet/core/install/[Microsoft .NET^]
5175

5276
=== Procedure
5377

5478
. Create a new Blazor project:
5579
+
5680
[source,sh]
5781
----
58-
dotnet new blazorserver -o BlazorApp --no-https
82+
dotnet new blazor -o BlazorApp --no-https
5983
----
6084
. Change into the new application directory:
6185
+
@@ -80,7 +104,6 @@ dotnet add package TinyMCE
80104
----
81105

82106
endif::[]
83-
include::partial$integrations/blazor-postinstall.adoc[]
84107

85108
. Test the application using the .NET development server.
86109
* To start the development server, in the project's root directory, run:
@@ -90,9 +113,21 @@ include::partial$integrations/blazor-postinstall.adoc[]
90113
dotnet watch run
91114
----
92115
+
93-
This will start a local development server, accessible at http://localhost:5000.
116+
This will start a local development server accessible at `http://localhost:{PORT}`, where `{PORT}` is specified in the project's `+Properties/launchSettings.json+` file.
94117
* To stop the development server, select on the command line or command prompt and press _Ctrl+C_.
95118

119+
120+
ifeval::["{productSource}" == "zip"]
121+
122+
== Download {productname} Zip
123+
124+
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.
125+
endif::[]
126+
127+
== Post-installation
128+
129+
include::partial$integrations/blazor-postinstall.adoc[]
130+
96131
== Next Steps
97132

98133
For information on customizing the integration, see:

‎modules/ROOT/partials/integrations/blazor-tech-ref.adoc‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ The `+TinyMCE.Blazor+` `+Editor+` component accepts the following properties:
1818
Disable=false
1919
JsConfSrc="path_to_jsObj"
2020
Conf="@yourConf"
21-
ApiKey="your-api-key"
21+
ApiKey="no-api-key"
2222
LicenseKey="your-license-key"
2323
ScriptSrc="/path/to/tinymce.min.js"
2424
ClassName="tinymce-wrapper"
@@ -40,7 +40,7 @@ None of the configuration properties are required for the TinyMCE Blazor integra
4040
[source,cs]
4141
----
4242
<Editor
43-
ApiKey="your-api-key"
43+
ApiKey="no-api-key"
4444
/>
4545
----
4646

0 commit comments

Comments
 (0)