Using the TinyMCE .zip 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-svelte
editor component, such as:npm install @tinymce/tinymce-svelte
-
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="/path/or/url/to/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: