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 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
-
Create a Svelte application using the Svelte template project, for example:
npx degit sveltejs/template my-tiny-app cd my-tiny-app
-
Install the
tinymce
and thetinymce-svelte
editor component, such as:npm install tinymce @tinymce/tinymce-svelte
-
Install the
rollup-plugin-copy
development dependency, such as:npm install rollup-plugin-copy -D
-
Open
rollup.config.js
and configure the rollup copy pluginrollup-plugin-copy
to copy TinyMCE to thepublic/
directory, such as:/* Existing import statements */ import copy from 'rollup-plugin-copy' /* Skip to the export statement, `plugins` item and add `copy`*/ export default { /* Existing key: values... */ plugins: [ copy({ targets: [ { src: 'node_modules/tinymce/*', dest: 'public/tinymce' } ] }), /* More existing configuration... */ ] }
-
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 theEditor
placeholder.For example:
File:
src/App.svelte
<script lang="ts"> import Editor from '@tinymce/tinymce-svelte'; </script> <main> <h1>Hello Tiny</h1> <Editor scriptSrc='tinymce/tinymce.min.js' /> </main>
-
-
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
-
For examples of the TinyMCE integration, see: the tinymce-svelte storybook.
-
For information on customizing, see: