Using the TinyMCE .zip package with the Svelte framework

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

  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.

    • The scriptSrc property for the Editor placeholder.

      For example:

      File: src/App.svelte

      <script lang="ts">
import Editor from '@tinymce/tinymce-svelte';
</script>
<main>
  <h1>Hello Tiny</h1>
  <Editor
    scriptSrc="/path/or/url/to/tinymce.min.js"
  />
</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:8080.

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

Next Steps