TinyMCE Svelte integration technical reference

Configuring the TinyMCE Svelte integration

The tinymce-svelte Editor component accepts the following properties:

<Editor
  apiKey="api-key"
  channel="8"
  id="uuid"
  inline=false
  disabled=false
  readonly=false
  scriptSrc=undefined
  conf={}
  modelEvents="input change undo redo"
  value="value"
  text="readonly-text-output"
/>

apiKey

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

To register for a Tiny Cloud API key, visit the Tiny Account sign-up page. To retrieve the Tiny Cloud API key for an existing Tiny Account, login and visit the Tiny Account Dashboard.

Type: String

Default value: 'no-api-key'

Example using apiKey

<Editor
  apiKey="no-api-key"
/>

licenseKey

Specifies the TinyMCE license key. Required for self-hosted deployments of TinyMCE. This property is not required for cloud-only deployments using the Tiny Cloud as your cloud subscription automatically includes the commercial license. For more information, see: License Key.

Type: String

Default value: undefined

Possible values: * undefined - Use this when loading from Tiny Cloud with an API key * 'gpl' - For open source projects using GPL license * 'T8LK:…​' - For commercial TinyMCE installations (must use this prefix for version 8+) * 'GPL+T8LK:' - For open source projects that require premium features while maintaining GPL compliance.

In hybrid deployments (using both cloud and self-hosted features):

  • You can provide both an API key and a license key

  • The editor will use cloud services when available

  • It will automatically fall back to the local license key if cloud services are not contactable

Example: Commercial license

<Editor
  licenseKey="T8LK:..."
/>

Example: using licenseKey with GPL

<Editor
  licenseKey="gpl"
/>

channel

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

Type: String

Default value: '8'

Possible values: '8', '8-testing', '8-dev', '8.1'

Example using channel

<Editor
  channel="8-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"
/>

inline

Sets the editor to use inline mode.

Type: Boolean

Default value: false

Example using inline

<Editor
  inline=true
/>

disabled

Set the editor to disabled.

Type: Boolean

Default value: false

Example using disabled

<Editor
  disabled=true
/>

readonly

Set the editor to readonly mode.

Type: Boolean

Default value: false

Example using readonly

<Editor
  readonly=true
/>

scriptSrc

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

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

Default value: {}

Example using conf

<script>
 let conf = {
   toolbar: 'undo redo',
   menubar: false
 }
</script>
<main>
  <Editor
    {conf}
  />
</main>

Component binding

Input binding

The editor component allows developers to bind the contents of editor to a variable. By specifying the bind:value, developers can create a two-way binding on a selected variable.

Example of input binding

<script>
let value = 'some content';
</script>
<main>
  <Editor bind:value={value} />
  <div>{@html value}</div>
  <textarea bind:value={value}></textarea>
</main>

Binding text output

The editor exposes the 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 of text binding

<script>
let text = '';
</script>
<main>
  <Editor bind:text={text} />
  <div>{text}</div>
</main>

Event binding

Functions can be bound to editor events, such as:

<Editor on:resizeeditor={this.handlerFunction} />

When the handler is called (handlerFunction in this example), it is called with two arguments:

event

The TinyMCE event object.

editor

A reference to the editor.

Ensure event names are specified in lower-case (event names are case-sensitive).

The following events are available:

  • activate

  • addundo

  • beforeaddundo

  • beforeexeccommand

  • beforegetcontent

  • beforerenderui

  • beforesetcontent

  • beforepaste

  • blur

  • change

  • clearundos

  • click

  • CommentChange

  • CompositionEnd

  • CompositionStart

  • CompositionUpdate

  • contextmenu

  • copy

  • cut

  • dblclick

  • deactivate

  • dirty

  • drag

  • dragdrop

  • dragend

  • draggesture

  • dragover

  • drop

  • execcommand

  • focus

  • focusin

  • focusout

  • getcontent

  • hide

  • init

  • input

  • keydown

  • keypress

  • keyup

  • loadcontent

  • mousedown

  • mouseenter

  • mouseleave

  • mousemove

  • mouseout

  • mouseover

  • mouseup

  • nodechange

  • objectresizestart

  • objectresized

  • objectselected

  • paste

  • postprocess

  • postrender

  • preprocess

  • progressstate

  • redo

  • remove

  • reset

  • resizeeditor

  • savecontent

  • selectionchange

  • setattrib

  • setcontent

  • show

  • submit

  • undo

  • visualaid