CODEWITHSUNDEEP
angularckeditoreditorangular17tinymce-5
Alpesh
Alpesh

Reputation: 19

How to add Custom Button in Angular TinyMCE

My requirement is to add the custom button/menu to add the form elements with in TinyMCE Angular editor.

Here is the template code i have used. My requirement is to add the new button in the toolbar or anywhere within editor.

`<editor
    apiKey="2zr2n................................g26r3pdhfruj"
    formControlName="body"
    [init]="{ 
      plugins: 'advlist autolink link image lists',
      toolbar: 'paste undo redo',
    }"
></editor>`

This is the code i have tried to use in ts file.

`OnInit(editor) {
    editor.ui.registry.addButton('test', {
      text: 'My button',
      icon: false,
      onclick: function () {
        alert('test')
      }
    })   
  }`

Upvotes: 0

Views: 71

Answers (1)

MoxxiManagarm
MoxxiManagarm

Reputation: 9134

You are using wrong properties.

  • icon is defined as string and not as boolean. The string indicates which icon is used
  • onclick does not exist on ToolbarButtonSpec. Use onAction instead
interface ToolbarButtonSpec extends BaseToolbarButtonSpec<ToolbarButtonInstanceApi> {
    type?: 'button';
    onAction: (api: ToolbarButtonInstanceApi) => void;
}

interface BaseToolbarButtonSpec<I extends BaseToolbarButtonInstanceApi> {
    enabled?: boolean;
    tooltip?: string;
    icon?: string;
    text?: string;
    onSetup?: (api: I) => (api: I) => void;
}

Upvotes: 1

Related Questions