DOC-990: Add Blazor integration docs (#2138)

* DOC-990: Add Blazor integration docs

* blazor - add ClassName

* minor Blazor edits

* Update _includes/integrations/blazor-tech-ref.md

* Apply suggestions from code review

Co-authored-by: Neil Ashford <neil.ashford@tiny.cloud>

Co-authored-by: Neil Ashford <neil.ashford@tiny.cloud>

_data/nav.yml

@@ -910,6 +910,10 @@
     pages:
     - url: "#TinyMCE Angular integration quick start guide"
     - url: "#TinyMCE Angular technical reference"
+  - url: "blazor"
+    pages:
+    - url: "#TinyMCE Blazor integration quick start guides"
+    - url: "#TinyMCE Blazor integration technical reference"
   - url: "bootstrap"
   - url: "django"
   - url: "jquery"

_includes/integrations/blazor-postinstall.md

@@ -0,0 +1,44 @@
+1. Verify the installation by checking the `ItemGroup` references in `BlazorApp.csproj`, such as:
+
+    _File:_ `BlazorApp.csproj`
+
+    ```xml
+    <ItemGroup>
+      <PackageReference Include="TinyMCE.Blazor" Version="X.Y.Z" />
+    </ItemGroup>
+    ```
+
+1. Add the `tinymce-blazor.js` script to `Pages/_Host.cshtml`, for example:
+
+    ```html
+    <script src="_framework/blazor.server.js"></script>
+    <script src="_content/TinyMCE.Blazor/tinymce-blazor.js"></script>
+    ```
+
+1. Add the `Editor` component to a page by either:
+
+    * Using the `using` directive
+
+        ```cs
+        @using TinyMCE.Blazor
+        <Editor />
+        ```
+
+    * Using the full component and package name
+
+        ```cs
+        <TinyMCE.Blazor.Editor />
+        ```
+
+    For example:
+
+    _File:_ `Pages/Index.razor`
+
+    ```cs
+    @page "/"
+    @using TinyMCE.Blazor
+
+    <h1>Hello, world!</h1>
+    Welcome to your new app.
+    <Editor />
+    ```

_includes/integrations/blazor-quick-start.md

@@ -0,0 +1,81 @@
+## TinyMCE Blazor integration quick start guides
+
+The [Official {{site.productname}} Blazor component](https://github.com/tinymce/tinymce-blazor) integrates {{site.productname}} into [Blazor applications](https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor).
+This procedure creates a basic Blazor application and adds a {{site.productname}} editor using the {{site.productname}} Blazor integration. The basic Blazor application is based on the following tutorial: [Microsoft .NET Blazor Tutorial - Build your first Blazor app](https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/).
+
+Select from the following guides:
+
+* [Using Visual Studio](#usingvisualstudio)
+* [Using a command prompt or terminal](#usingacommandpromptorterminal)
+
+### Using Visual Studio
+
+#### Prerequisites
+
+This procedure requires:
+
+* [Microsoft Visual Studio](https://docs.microsoft.com/en-us/visualstudio/windows/)
+* [Microsoft .NET](https://docs.microsoft.com/en-us/dotnet/core/install/)
+
+#### Procedure
+
+1. On the Visual Studio toolbar, click the [**New Project** button](https://docs.microsoft.com/en-us/visualstudio/ide/create-new-project).
+1. Select the **Blazor Server App** template.
+1. Use the NuGet package manager console to install the `TinyMCE.Blazor` package, such as:
+
+    ```sh
+    Install-Package TinyMCE.Blazor
+    ```
+
+{% include integrations/blazor-postinstall.md %}
+
+1. To test the application, run the application by pressing **Ctrl+F5**.
+
+### Using a command prompt or terminal
+
+#### Prerequisites
+
+This procedure requires:
+
+* [Microsoft .NET](https://docs.microsoft.com/en-us/dotnet/core/install/)
+
+#### Procedure
+
+1. Create a new Blazor project:
+
+    ```sh
+    dotnet new blazorserver -o BlazorApp --no-https
+    ```
+
+1. Change into the new application directory:
+
+    ```sh
+    cd BlazorApp
+    ```
+
+1. Install the {{site.productname}} Blazor integration:
+
+    ```sh
+    dotnet add package TinyMCE.Blazor
+    ```
+
+{% include integrations/blazor-postinstall.md %}
+
+1. Test the application using the .NET development server.
+
+    * To start the development server, in the project's root directory, run:
+
+        ```sh
+        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_.
+
+### Next Steps
+
+For information on customizing the integration, see:
+
+* [{{site.productname}} basic setup]({{site.baseurl}}/general-configuration-guide/basic-setup/).
+* [The {{site.productname}} Blazor integration technical reference]({{site.baseurl}}/integrations/blazor/#tinymceblazorintegrationtechnicalreference).

_includes/integrations/blazor-tech-ref.md

@@ -0,0 +1,248 @@
+## TinyMCE Blazor integration technical reference
+
+Covered in this section:
+
+* [Configuring the TinyMCE Blazor integration](#configuringthetinymceblazorintegration)
+* [Component binding](#componentbinding)
+
+### Configuring the TinyMCE Blazor integration
+
+The `TinyMCE.Blazor` `Editor` component accepts the following properties:
+
+```cs
+<Editor
+  Id="uuid"
+  Inline=false
+  CloudChannel="5"
+  Value=""
+  Disable=false
+  JsConfSrc="path_to_jsObj"
+  Conf="@yourConf"
+  ApiKey="your-api-key"
+  ClassName="tinymce-wrapper"
+/>
+```
+
+None of the configuration properties are required for the TinyMCE Blazor integration to work.
+
+#### ApiKey
+
+{{site.cloudname}} API key. Required for deployments using the {{site.cloudname}} to provide the {{site.productname}} editor.
+
+Default value
+: `"no-api-key"`
+
+Type
+: String
+
+##### Example using ApiKey
+
+```cs
+<Editor
+  ApiKey="your-api-key"
+/>
+```
+
+#### CloudChannel
+
+Specifies the {{site.cloudname}} channel to use. For information on {{site.productname}} development channels, see: [Specifying the {{site.productname}} editor version deployed from Cloud]({{site.baseurl}}/cloud-deployment-guide/editor-plugin-version/).
+
+Default value
+: `"5"`
+
+Type
+: String
+
+##### Example using CloudChannel
+
+```cs
+<Editor
+  CloudChannel="5-dev"
+/>
+```
+
+#### Id
+
+Specified an Id for the editor. Used for retrieving the editor instance using the `tinymce.get('ID')` method.
+
+Default value
+: Automatically generated UUID
+
+Type
+: String
+
+##### Example using Id
+
+```cs
+<Editor
+  Id="my-unique-identifier"
+/>
+```
+
+#### ClassName
+
+Specifies the class of the Editor's container `div` in the component. This `div` is the parent of the Editor and adding styles to it will not add styles to the editor.
+
+Default value
+: `"tinymce-wrapper"`
+
+Type
+: String
+
+##### Examples using ClassName
+
+Setting a static class name:
+
+```cs
+<Editor ClassName="my-editor-container" />
+```
+
+Setting a dynamic class name:
+
+```cs
+<Editor ClassName="@((isEditorActive) ? "active-editor-div" : "default-editor-div")" />
+```
+
+#### Inline
+
+Set the editor to inline mode.
+
+Default value
+: `false`
+
+Type
+: Boolean
+
+##### Example using Inline
+
+```cs
+<Editor
+  Inline=true
+/>
+```
+
+#### Disable
+
+Set the editor to readonly mode.
+
+Default value
+: `false`
+
+Type
+: Boolean
+
+##### Example using Disable
+
+```cs
+<Editor
+  Disable=@disable
+/>
+<button @onclick="@(() => disable = !disable)">Toggle</button>
+```
+
+#### JsConfSrc
+
+Use a JS object as base configuration for the editor by specifying the path to the object relative to the window object.
+
+Default
+: `null`
+
+Type
+: String
+
+##### Example using JsConfSrc
+
+In your `_Host.cshtml`:
+
+```cs
+window.sample = {
+  height: 300,
+  toolbar: 'undo redo | bold italic'
+}
+```
+
+In your component:
+
+```cs
+<Editor
+  JsConfSrc="sample"
+/>
+```
+
+#### ScriptSrc
+
+Use the `ScriptSrc` property to specify the location of {{site.productname}} to lazy load when the application is not using {{site.cloudname}}. This setting is required if the application uses a self-hosted version of {{site.productname}}, such as the [{{site.productname}} NuGet package](https://www.nuget.org/packages/TinyMCE/) or a .zip package of {{site.productname}}.
+
+Type
+: String
+
+##### Example using ScriptSrc
+
+```cs
+<Editor
+  ScriptSrc="/path/to/tinymce.min.js"
+/>
+```
+
+#### Conf
+
+Specify a set of properties for the `Tinymce.init` method to initialize the editor.
+
+Default value
+: `null`
+
+Type
+: Dictionary&#60;string, object&#62;
+
+##### Example using Conf
+
+```cs
+<Editor
+  Conf="@editorConf"
+/>
+
+@code {
+  private Dictionary<string, object> editorConf = new Dictionary<string, object>{
+    {"toolbar", "undo redo | bold italic"},
+    {"width", 400}
+  };
+}
+```
+
+### Component binding
+
+#### Input binding
+
+The editor component allows developers to bind the contents of editor to a variable. By specifying the `@bind-Value` directive, developers can create a two-way binding on a selected variable.
+
+##### Example using input binding
+
+```cs
+<Editor
+  @bind-Value=content
+/>
+
+<textarea @bind=content @bind:event="oninput"></textarea>
+
+@code {
+  private string content = "<p>Hello world</p>";
+}
+```
+
+#### Binding Text output
+
+Starting from TinyMCE.Blazor v0.0.4, the editor exposes the `@bind-Text` property, which developers can `bind` to retrieve a read-only value of the editor content as text. Changes will not propagate up to the editor if the `text` bound variable changes. It will only propagate changes from the editor.
+
+##### Example using output text binding
+
+```cs
+<Editor
+  @bind-Text=content
+/>
+
+<textarea @bind=content @bind:event="oninput"></textarea>
+
+@code {
+  private string content = "";
+}
+```

integrations/blazor.md

@@ -0,0 +1,11 @@
+---
+layout: default
+title: Blazor integration
+title_nav: Blazor
+description: Blazor TinyMCE component.
+keywords: integration integrate blazor blazorapp
+---
+
+{% include integrations/blazor-quick-start.md %}
+
+{% include integrations/blazor-tech-ref.md %}