Important changes to Tiny Cloud pricing > Find out more

NOTE: TinyMCE 5 reached End of Support in April 2023. No more bug fixes, security updates, or new features will be introduced to TinyMCE 5. We recommend you upgrade to TinyMCE 6 or consider TinyMCE 5 Long Term Support (LTS) if you need more time.

Svelte integration

Svelte TinyMCE component.

Contribute to this page

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

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

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.