tinymce-docs/modules/ROOT/partials/integrations/blazor-tech-ref.adoc

Covered in this section:

* xref:configuring-the-tinymce-blazor-integration[Configuring the TinyMCE Blazor integration]
* xref:component-binding[Component binding]

[[configuring-the-tinymce-blazor-integration]]
== Configuring the TinyMCE Blazor integration

The `+TinyMCE.Blazor+` `+Editor+` component accepts the following properties:

[source,cs,subs="attributes+"]
----
<Editor
  Id="uuid"
  Inline=false
  CloudChannel="{productmajorversion}"
  Value=""
  Disable=false
  JsConfSrc="path_to_jsObj"
  Conf="@yourConf"
  ApiKey="no-api-key"
  LicenseKey="your-license-key"
  ScriptSrc="/path/to/tinymce.min.js"
  ClassName="tinymce-wrapper"
/>
----

None of the configuration properties are required for the TinyMCE Blazor integration to work.

=== `ApiKey`

{cloudname} API key. Required for deployments using the {cloudname} to provide the {productname} editor.

*Type:* `+String+`

*Default value:* `+'no-api-key'+`

==== Example using ApiKey

[source,cs]
----
<Editor
  ApiKey="no-api-key"
/>
----

=== `CloudChannel`

Specifies the {cloudname} channel to use. For information on {productname} development channels, see: xref:editor-plugin-version.adoc[Specifying the {productname} editor version deployed from Cloud].

*Type:* `+String+`

*Default value:* `'{productmajorversion}'`

*Possible values:* `'{productmajorversion}'`, `'{productmajorversion}-testing'`, `'{productmajorversion}-dev'`, `'{productminorversion}'`

==== Example using CloudChannel

[source,cs,subs="attributes+"]
----
<Editor
  CloudChannel="{productmajorversion}-dev"
/>
----

=== `Id`

Specified an Id for the editor. Used for retrieving the editor instance using the `+tinymce.get('ID')+` method.

*Type:* `+String+`

*Default value:* Automatically generated https://tools.ietf.org/html/rfc4122[UUID]

==== Example using Id

[source,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.

*Type:* `+String+`

*Default value:* `+'tinymce-wrapper'+`

==== Examples using ClassName

Setting a static class name:

[source,cs]
----
<Editor ClassName="my-editor-container" />
----

Setting a dynamic class name:

[source,cs]
----
<Editor ClassName="@((isEditorActive) ? "active-editor-div" : "default-editor-div")" />
----

=== `Inline`

Set the editor to inline mode.

*Type:* `+Boolean+`

*Default value:* `+false+`

==== Example using Inline

[source,cs]
----
<Editor
  Inline=true
/>
----

=== `Disable`

Sets the editor to a disable state.

*Type:* `+Boolean+`

*Default value:* `+false+`

==== Example using Disable

[source,cs]
----
<Editor
  Disable=@disable
/>
<button @onclick="@(() => disable = !disable)">Toggle</button>
----

=== `Readonly`

Sets the editor to readonly mode.

*Type:* `+Boolean+`

*Default value:* `+false+`

==== Example using Readonly

[source,cs]
----
<Editor
  Readonly=@readonly
/>
<button @onclick="@(() => readonly = !readonly)">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.

*Type:* `+String+`

*Default value:* `+null+`

==== Example using JsConfSrc

In your `+_Host.cshtml+`:

[source,cs]
----
window.sample = {
  height: 300,
  toolbar: 'undo redo | bold italic'
}
----

In your component:

[source,cs]
----
<Editor
  JsConfSrc="sample"
/>
----

=== `LicenseKey`

Specifies the {productname} license key. Required for self-hosted deployments of {productname}. This property is not required for deployments using the {cloudname}. For more information on licensing, see: xref:license-key.adoc[License key].

*Type:* `+String+`

==== Example using LicenseKey

[source,cs]
----
<Editor
  LicenseKey="your-license-key"
/>
----

=== `ScriptSrc`

Use the `+ScriptSrc+` property to specify the location of {productname} to lazy load when the application is not using {cloudname}. This setting is required if the application uses a self-hosted version of {productname}, such as the https://www.nuget.org/packages/TinyMCE/[{productname} NuGet package] or a .zip package of {productname}.

*Type:* `+String+`

==== Example using ScriptSrc

[source,cs]
----
<Editor
  ScriptSrc="/path/to/tinymce.min.js"
/>
----

=== `Conf`

Specify a set of properties for the `+Tinymce.init+` method to initialize the editor.

*Type:* `+Dictionary<string, object>+`

*Default value:* `+null+`

==== Example using Conf

[source,cs]
----
<Editor
  Conf="@editorConf"
/>

@code {
  private Dictionary<string, object> editorConf = new Dictionary<string, object>{
    {"toolbar", "undo redo | bold italic"},
    {"width", 400}
  };
}
----

[[component-binding]]
== 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

[source,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

[source,cs]
----
<Editor
  @bind-Text=content
/>

<textarea @bind=content @bind:event="oninput"></textarea>

@code {
  private string content = "";
}
----