Using TinyMCE from the Tiny Cloud CDN 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.For example:
File:
src/App.svelte
<script lang="ts"> import Editor from '@tinymce/tinymce-svelte'; </script> <main> <h1>Hello Tiny</h1> <Editor apiKey="your-tiny-cloud-api-key" /> </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: