This package is a thin wrapper around TinyMCE to make it easier to use in a Svelte application.
npx degit sveltejs/template my-tiny-app
cd my-tiny-app
Installl the editor component in your project
npm install @tinymce/tinymce-svelte
Import the TinyMCE component inside the script tag of your Svelte app
<script lang="ts">
import Editor from '@tinymce/tinymce-svelte';
</script>
<main>
<h1> Hello Tiny</h1>
<Editor />
</main>
The editor component accepts the following properties:
<Editor
apiKey="api-key"
channel="5"
id="uuid"
inline=false
disabled=false
scriptSrc=undefined
conf={}
modelEvents="input change undo redo"
value="value"
text="readonly-text-output"
cssClass="tinymce-wrapper"
/>
Tiny Cloud API key. Required for deployments using the Tiny Cloud to provide the TinyMCE editor.
Default value: no-api-key Type: string
<Editor
apiKey="your-api-key"
/>
Specifies the Tiny Cloud channel to use. For more information on TinyMCE development channels, see: Specifying the TinyMCE editor version deployed from Cloud - dev, testing, and stable releases
Default value: '5' Type: string
<Editor
channel="5-dev"
/>
Specifies the name of the class or classes to use for the div
wrapping the editor.
Default value: 'tinymce-wrapper' Type: string
<script>
let editorCss = 'active editor';
</script>
<Editor
cssClass={editorCss}
/>
Specified an Id for the editor. Used for retrieving the editor instance using the tinymce.get('ID')
method.
Default value: Automatically generated UUID Type: string
<Editor
id="my-unique-identifier"
/>
Set the editor to inline mode.
Default value: false Type: bool
<Editor
inline=true
/>
Set the editor to readonly mode.
Default value: false Type: bool
<Editor
disabled=true
/>
Specify a set of properties for the Tinymce.init
method to initialize the editor.
Default value: {} Type: Object
<script>
let conf = {
toolbar: 'undo redo',
menubar: false
}
</script>
<main>
<Editor
{conf}
/>
</main>
The editor component allows users to bind the contents of editor to a variable. By specifying the bind:value
, users can do two-way binding on a select variable.
<script>
let value = 'some content';
</script>
<main>
<Editor bind:value={value} />
<div>{@html value}</div>
<textarea bind:value={value}></textarea>
</main>
The editor exposes the text
property as a read-only value you can bind to get the editor content as text. It is important to remember that changes will not propagate up the editor if the text bound variable changes. It will only propagate changes from the editor.
<script>
let text = '';
</script>
<main>
<Editor bind:text={text} />
<div>{text}</div>
</main>