Using TinyMCE from the Tiny Cloud CDN 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

  2. Change to the project directory.

    cd tinymce-svelte-demo

  3. Install project dependencies.

    npm install

  4. Install the tinymce-svelte editor component:

    npm install @tinymce/tinymce-svelte

  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
    apiKey='no-api-key'
    channel='7'
    value='<p>This is the initial content of the editor.</p>'
    {conf}
  />
</main>

Replace no-api-key with a valid Tiny Cloud API key.

To register for a Tiny Cloud API key, visit the Tiny Account sign-up page. To retrieve the Tiny Cloud API key for an existing Tiny Account, login and visit the Tiny Account Dashboard.

Run the Application

Test the application using the Node.js development server.

  1. To start the development server:

    npm run dev

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

Next Steps