OpenTiny Blazor integration technical reference

Configuring the OpenTiny Blazor integration

The OpenTiny.Blazor Editor component accepts the following properties:

<Editor
  Id="uuid"
  Inline=false
  CloudChannel="5"
  Value=""
  Disable=false
  JsConfSrc="path_to_jsObj"
  Conf="@yourConf"
  ScriptSrc="/path/to/tinymce.min.js"
  ApiKey="your-api-key"
  ClassName="tinymce-wrapper"
/>

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

ApiKey

Tiny Cloud API key. Required for deployments using the Tiny Cloud to provide the OpenTiny editor.

Type: String

Default value: 'no-api-key'

Example using ApiKey

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

CloudChannel

Specifies the Tiny Cloud channel to use. For information on OpenTiny development channels, see: Specifying the OpenTiny editor version deployed from Cloud.

Type: String

Default value: '6'

Possible values: '6', '6-testing', '6-dev', '6.9.0'

Example using CloudChannel

<Editor
  CloudChannel="6-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

Set the editor to readonly mode.

Type: Boolean

Default value: false

Example using Disable

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

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"
/>

ScriptSrc

Use the ScriptSrc property to specify the location of OpenTiny to lazy load when the application is not using Tiny Cloud. This setting is required if the application uses a self-hosted version of OpenTiny, such as the OpenTiny NuGet package or a .zip package of OpenTiny.

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 OpenTiny.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 = "";
}