Using the TinyMCE .zip 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
    sh

  2. Change to the project directory.

    cd tinymce-svelte-demo
    sh

  3. Install project dependencies.

    npm install
    sh

  4. Install the tinymce-svelte editor component:

    npm install @tinymce/tinymce-svelte
    sh

  5. 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='/path/or/url/to/tinymce.min.js'
    value='<p>This is the initial content of the editor.</p>'
    {conf}
  />
</main>
    html

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

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

Next Steps