Add custom button not working

[noveltieng]

The custom button did not appear when i use addButton function

The following code is my config public tinyMceInit: any = { height: 300, menubar: true, object_resizing: true, file_picker_types: 'image', images_upload_url: this.uploadService.uploadRichTextEditorMedia(), plugins: [ 'advlist autolink lists link image imagetools charmap print preview anchor', 'searchreplace visualblocks code fullscreen', 'insertdatetime media table paste code wordcount', ], toolbar: 'undo redo | formatselect | image | bold italic backcolor | \ alignleft aligncenter alignright alignjustify | \ bullist numlist outdent indent | table | removeformat | help', setup: function (editor) { editor.addButton('customButton', { text: 'My Custom Button', context: 'tags', onclick: function () { editor.insertContent('content to insert goes here'); } }); } };

[jscasca]

Hi @noveltieng

The addButton method is part of the editor's UI registry so you have to call editor.ui.registry.addButton instead. You can find more information here: https://www.tiny.cloud/docs/api/tinymce.editor.ui/tinymce.editor.ui.registry/#addbutton Additionally, remember to add the custom button to your toolbar.

Here is the angular example with your init variable: https://codesandbox.io/s/tinymceangular-forked-r51uh?file=/src/app/app.component.ts. Let me know if this helps

[noveltieng]

Hi @noveltieng

The addButton method is part of the editor's UI registry so you have to call editor.ui.registry.addButton instead. You can find more information here: https://www.tiny.cloud/docs/api/tinymce.editor.ui/tinymce.editor.ui.registry/#addbutton Additionally, remember to add the custom button to your toolbar.

Here is the angular example with your init variable: https://codesandbox.io/s/tinymceangular-forked-r51uh?file=/src/app/app.component.ts. Let me know if this helps

Thanks for the sample. I didnt add the custom button to the toolbar, that's why it's not appearing. Thanks a lot.