Struggling to add a custom button to the toolbar of tinymce using the vue.js wrapper (utilizing vue 3 and tinymce 5). The problem is that the custom button is not appearing in the toolbar.
I have attempted the following steps, the logs in the init and setup functions are displaying in the console. When running
tinymce.activeEditor.ui.registry.getAll().buttons<template>
<Editor
api-key="any-key"
v-model="content"
:init="editorSettings"
@onInit="handleEditorInit"
/>
</template>
<script>
import Editor from '@tinymce/tinymce-vue';
export default {
components: {
Editor,
},
data() {
return {
content: '',
editorSettings: {
setup: function (editor) {
console.log('setup', editor);
editor.on('init', function () {
console.log('setup init', editor);
editor.ui.registry.addButton('test', {
text: 'Custom',
tooltip: 'Add Custom Action',
onAction: function () {
console.log('test button clicked');
},
});
});
},
toolbar: 'test',
},
};
},
};
</script>
Encountered a method
editor.ui.registry.addToToolbar('customAction');