Svelte support for editor.setContent

[staadecker]

Hi there!

My apologies if this is a basic question, I'm still learning Svelte and TinyMCE.

Say I have some custom Svelte component

MyComponent.svelte

<script lang="ts">
    ...
</script>
<div>
   ...
</div>

And I want to add it inside a TinyMCE editor using a button in the toolbar. Something like this:

<script lang="ts">
    import Editor from '@tinymce/tinymce-svelte';
    import MyComponent from "../components/MyComponent.svelte";

    let conf = {
        menubar: false,
        branding: false,
        statusbar: false,
        toolbar: "undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | add_my_component",
        setup: (editor) => {
            editor.ui.registry.addButton("add_my_component", {
                text: "Add custom component",
                onAction: (_) => {
                    // Something like this
                    editor.setContent("<MyComponent/>")
                }
            })
        }
    }
</script>

<main>
    <Editor
            scriptSrc="tinymce/tinymce.min.js"
            {conf}
    >
    </Editor>
</main>

This doesn't work, so I was wondering if what I am trying to achieve is even possible.

Thank you very much! Martin

[TinyITAdmin]

Ref: INT-3181

[tiny-stale-bot]

This issue is stale because it has been open 30 days with no activity. Please comment if you wish to keep this issue open or it will be closed in 7 days.

[tiny-stale-bot]

This issue was closed because it has been stalled for 7 days with no activity.