svelte-tech-ref.adoc

Covered in this section:

• Configuring the TinyMCE Svelte integration

  • apiKey

  • licenseKey

  • channel

  • id

  • inline

  • disabled

  • readonly

  • scriptsrc

  • conf

• Component binding

• Event binding

Configuring the TinyMCE Svelte integration

The tinymce-svelte Editor component accepts the following properties:

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

apiKey

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

partial$misc/get-an-api-key.adoc

Type: String

Default value: 'no-api-key'

Example using apiKey

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

licenseKey

{cloudname} License key.

Use this option when self-hosting {productname} instead of loading from {cloudname}. For more information, see: License Key.

Type: String

Default value: undefined

Possible values: undefined, 'gpl' or a valid {productname} license key

Example: using licenseKey

<Editor
  licenseKey="your-license-key"
/>

channel

Specifies the {cloudname} channel to use. For information on {cloudname} deployment 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 channel

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

inline

Sets the editor to use inline mode.

Type: Boolean

Default value: false

Example using inline

<Editor
  inline=true
/>

disabled

Set the editor to disabeld.

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 {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} npm 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: 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 {productname} event object.

editor

A reference to the editor.

Tip	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