blazor-tech-ref.adoc

Covered in this section:

• Configuring the TinyMCE Blazor integration

• Component binding

Configuring the TinyMCE Blazor integration

The TinyMCE.Blazor Editor component accepts the following properties:

<Editor
  Id="uuid"
  Inline=false
  CloudChannel="{productmajorversion}"
  Value=""
  Disable=false
  JsConfSrc="path_to_jsObj"
  Conf="@yourConf"
  ApiKey="your-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

<Editor
  ApiKey="your-api-key"
/>

CloudChannel

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

Type: String

Default value: '{productmajorversion}'

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

Example using CloudChannel

<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 UUID

Example using Id

<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:

<Editor ClassName="my-editor-container" />

Setting a dynamic class name:

<Editor ClassName="@((isEditorActive) ? "active-editor-div" : "default-editor-div")" />

Inline

Set the editor to inline mode.

Type: Boolean

Default value: false

Example using Inline

<Editor
  Inline=true
/>

Disable

Sets the editor to a disable state.

Type: Boolean

Default value: false

Example using Disable

<Editor
  Disable=@disable
/>
<button @onclick="@(() => disable = !disable)">Toggle</button>

Readonly

Sets the editor to readonly mode.

Type: Boolean

Default value: false

Example using Readonly

<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:

window.sample = {
  height: 300,
  toolbar: 'undo redo | bold italic'
}

In your component:

<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: License key.

Type: String

Example using LicenseKey

<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 {productname} NuGet package or a .zip package of {productname}.

Type: String

Example using ScriptSrc

<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

<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

<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

<Editor
  @bind-Text=content
/>

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

@code {
  private string content = "";
}