Svelte integration

TinyMCE Svelte integration quick start guide

The Official TinyMCE Svelte component integrates TinyMCE into Svelte applications. This procedure creates a basic Svelte application using the sveltejs/template project adds a TinyMCE editor based using the TinyMCE Svelte integration.

For examples of the TinyMCE integration, visit the tinymce-svelte storybook.

Prerequisites

This procedure requires:

Procedure

  1. Create a Svelte application using the Svelte template project, for example:

     npx degit sveltejs/template my-tiny-app
 cd my-tiny-app

  2. Install the tinymce-svelte editor component, such as:

     npm install @tinymce/tinymce-svelte

  3. Open src/App.svelte and add:

    • An import statement for the TinyMCE component.

    • The <Editor /> as a placeholder for the editor.

      For example:

      File: src/App.svelte

      <script lang="ts">
  import Editor from '@tinymce/tinymce-svelte';
</script>
<main>
  <h1>Hello Tiny</h1>
  <Editor></Editor>
</main>

  4. Test the application using the Node.js development server.

    • To start the development server, in the project’s root directory, run:

        npm run dev

      This will start a local development server, accessible at http://localhost:5000.

    • To stop the development server, select on the command line or command prompt and press Ctrl+C.

Next Steps

TinyMCE Svelte integration technical reference

Covered in this section:

Configuring the TinyMCE Svelte integration

The tinymce-svelte Editor component accepts the following properties:

<Editor
  apiKey="api-key"
  channel="5"
  id="uuid"
  inline=false
  disabled=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.

Default value

"no-api-key"

Type

String

Example using apiKey
<Editor apiKey="your-api-key"></Editor>

channel

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

Default value

"5"

Type

String

Example using channel
<Editor channel="5-dev"></Editor>

id

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

Default value

Automatically generated UUID

Type

String

Example using id
<Editor id="my-unique-identifier"></Editor>

inline

Set the editor to inline mode.

Default value

false

Type

Boolean

Example using inline
<Editor inline="true"></Editor>

disabled

Set the editor to readonly mode.

Default value

false

Type

Boolean

Example using disabled
<Editor disabled="true"></Editor>

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

conf

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

Default value

{}

Type

Object

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

  • contextmenu

  • copy

  • cut

  • dblclick

  • deactivate

  • dirty

  • drag

  • dragdrop

  • dragend

  • draggesture

  • dragover

  • drop

  • execcommand

  • focus

  • focusin

  • focusout

  • getcontent

  • hide

  • init

  • 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