Using the TinyMCE package with the Svelte framework

The Official TinyMCE Svelte component integrates TinyMCE into Svelte applications. Creates a basic Svelte application containing a TinyMCE editor.

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

Prerequisites

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 project directory.

    cd tinymce-svelte-demo

  3. Install project dependencies.

    npm install

  4. Install the tinymce and tinymce-svelte packages:

    npm install tinymce@^7 @tinymce/tinymce-svelte

  5. Install the vite-plugin-static-copy development dependency:

    npm install -D vite-plugin-static-copy

  6. Configure vite.config.js to copy TinyMCE to the public/ directory:

    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()
  ],
})

  7. 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>

  8. Update the licenseKey option in the editor element and include your License Key.

Run the Application

Test the application using the Node.js development server.

  1. To start the development server:

    npm run dev

  2. To stop the development server, use Ctrl+C in the terminal or command prompt.

Next Steps