Svelte integration

Svelte TinyMCE component.

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:

Node.js (and npm).

Procedure

Create a Svelte application using the Svelte template project, for example:
```
 npx degit sveltejs/template my-tiny-app
 cd my-tiny-app
```
Install the tinymce-svelte editor component, such as:
```
 npm install @tinymce/tinymce-svelte
```

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

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

For examples of the TinyMCE integration, see: the tinymce-svelte storybook.
For information on customizing, see:
- TinyMCE basic setup.
- The TinyMCE Svelte integration technical reference.

TinyMCE Svelte integration technical reference

Covered in this section:

Configuring the TinyMCE Svelte integration
Component binding
Event binding

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

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

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

inline

Set the editor to inline mode.

Default value: false
Type: Boolean

Example using inline

<Editor
  inline=true
/>

disabled

Set the editor to readonly mode.

Default value: false
Type: Boolean

Example using disabled

<Editor
  disabled=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.

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

Was this article helpful? Yes - No

Well, that's awkward . Would you mind opening an issue or helping us out?

Thanks for the feedback!

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.