I have non-editable buttons inside the TinyMCE text editor. I want to insert a JavaScript function so that when these buttons are clicked, the text “Hello world” is logged to the console. Here is the relevant HTML and JavaScript setup

<textarea id="tinymce">
    <div class="myclass">
        <button onclick="myFunction()">button outside</button>
    </div>
    <div class="myclass non-editable">
        <button onclick="myFunction()">button Inside</button>
        <button onclick="myFunction()">button Inside</button>
    </div>
</textarea>

tinymce.init({
    selector: 'textarea#tinymce',
    height: 500,
    content_style: `
        body { font-family:Helvetica,Arial,sans-serif; font-size:16px }
        .myclass { border: 0.1rem solid green; border-radius: 0.8rem; padding: 0.2rem; }
        .non-editable { border-color: red; }
    `,
    noneditable_class: 'non-editable'
});

function myFunction() {
    console.log("Hello world");
}

I have tried inserting the myFunction script directly into the TinyMCE content fragment, but the buttons inside the editor still don’t trigger the function. Does TinyMCE support this type of functionality?