Using the OpenTiny package with the Svelte framework

The Official OpenTiny Svelte component integrates OpenTiny into Svelte applications. This procedure creates a basic Svelte application using the sveltejs/template project adds a OpenTiny editor based using the OpenTiny Svelte integration.

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

Prerequisites

This procedure requires Node.js (and npm).

Procedure

  1. Create a Svelte application using the Svelte template project, for example:

    npx degit sveltejs/template my-tiny-app
cd my-tiny-app

  2. Install the tinymce and the tinymce-svelte editor component, such as:

    npm install tinymce @tinymce/tinymce-svelte

  3. Install the rollup-plugin-copy development dependency, such as:

    npm install rollup-plugin-copy -D

  4. Open rollup.config.js and configure the rollup copy plugin rollup-plugin-copy to copy OpenTiny to the public/ 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... */
  ]
}

  5. Open src/App.svelte and add:

    • An import statement for the OpenTiny component.

    • The <Editor /> as a placeholder for the editor.

    • The scriptSrc property for the Editor 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>

  6. 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