Bundling TinyMCE with a Svelte application

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

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

Prerequisites

Requires Node.js (and npm).

Procedure

Use the Vite package to create a new Svelte project named tinymce-svelte-demo, such as:
```
npm create vite@6 tinymce-svelte-demo -- --template svelte
```
Change to the project directory.
```
cd tinymce-svelte-demo
```
Install project dependencies.
```
npm install
```

Install the tinymce and tinymce-svelte packages:

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

(Optional) For premium plugins, install the tinymce-premium package:
```
npm install tinymce-premium@^8.3
```
For more information, see: Installing premium plugins.

For information on configuring premium plugins when bundling, see: Using premium plugins.

Using a text editor, create src/editor.js and set the contents to:

// Add the @tinymce/tinymce-svelte wrapper to the bundle
import Editor from '@tinymce/tinymce-svelte';

// TinyMCE so the global var exists
import 'tinymce/tinymce';
// DOM model
import 'tinymce/models/dom/model';
// Theme
import 'tinymce/themes/silver';
// Toolbar icons
import 'tinymce/icons/default';
// Editor styles
import 'tinymce/skins/ui/oxide/skin.min.css';

// Import plugins
import 'tinymce/plugins/advlist';
import 'tinymce/plugins/autolink';
import 'tinymce/plugins/link';
import 'tinymce/plugins/image';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/table';
import 'tinymce/plugins/code';
import 'tinymce/plugins/help';
import 'tinymce/plugins/wordcount';

// Import premium plugins from NPM
import 'tinymce-premium/plugins/advcode';
import 'tinymce-premium/plugins/tinycomments';
// Always include the licensekeymanager plugin when using premium plugins with a commercial license.
import 'tinymce-premium/plugins/licensekeymanager';

// Content styles, including inline UI like fake cursors
import 'tinymce/skins/content/default/content.js';
import 'tinymce/skins/ui/oxide/content.js';

// Export Editor component for use in Svelte components
export default Editor;

Using a text editor, open src/App.svelte and replace the contents with:

<script>
import Editor from './editor.js';
let content = '<p>This is the initial content of the editor.</p>';
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>TinyMCE Svelte Demo</h1>
  <Editor
    licenseKey='gpl'
    value={content}
    conf={conf}
  />
</main>

Run the development server:
```
npm run dev
```
The development server uses Vite to bundle your application on-the-fly. Vite processes all the import statements and includes the TinyMCE modules in the development bundle.
Build the application for production:
```
npm run build
```
This command creates an optimized production bundle in the dist directory.
Preview the production build:
```
npm run preview
```
Update the licenseKey property in the editor component and include your License Key.

Next Steps

For information on bundling, see: Introduction to bundling TinyMCE
See the following for additional information:
For a complete example, see: the Svelte bundling example repository.