Using the TinyMCE package with the Svelte framework

The Official TinyMCE Svelte component integrates TinyMCE into Svelte applications. This procedure creates a basic Svelte application containing a TinyMCE editor.

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

Prerequisites

This procedure requires Node.js (and npm).

Procedure

  1. Use the Vite package to create a new Svelte project named tinymce-svelte-demo, such as:

    npm create vite@5 tinymce-svelte-demo -- --template svelte
  2. Change to the newly created directory.

    cd tinymce-svelte-demo
  3. Install the tinymce and the tinymce-svelte editor component, such as:

    npm install tinymce@^7 @tinymce/tinymce-svelte
  4. Install the vite-plugin-static-copy development dependency, such as:

    npm install -D vite-plugin-static-copy
  5. Open vite.config.js and configure the vite-plugin-static-copy plugin to copy TinyMCE to the public/ directory, such as:

    import { defineConfig } from 'vite'
    import { svelte } from '@sveltejs/vite-plugin-svelte'
    import { viteStaticCopy } from 'vite-plugin-static-copy'
    
    // https://vitejs.dev/config/
    export default defineConfig({
      plugins: [
        viteStaticCopy({
          targets: [
            { src: 'node_modules/tinymce/*', dest: 'tinymce' }
          ]
        }),
        svelte()
      ],
    })
  6. Open src/App.svelte and replace the contents with:

    <script>
    import Editor from '@tinymce/tinymce-svelte';
    let conf = {
      height: 500,
      menubar: false,
      plugins: [
        'advlist', 'autolink', 'lists', 'link', 'image', 'charmap',
        'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
        'insertdatetime', 'media', 'table', 'preview', 'help', 'wordcount'
      ],
      toolbar: 'undo redo | blocks | ' +
        'bold italic forecolor | alignleft aligncenter ' +
        'alignright alignjustify | bullist numlist outdent indent | ' +
        'removeformat | help',
    }
    </script>
    <main>
      <h1>Hello Tiny</h1>
      <Editor
        licenseKey='your-license-key'
        scriptSrc='tinymce/tinymce.min.js'
        value='<p>This is the initial content of the editor.</p>'
        {conf}
      />
    </main>
  7. Test the application using the Node.js development server.

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

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

Next Steps