ArticleZip > What Are All The Possible Settings Attributes In Tinymces Addbutton Function

What Are All The Possible Settings Attributes In Tinymces Addbutton Function

When working with TinyMCE, the addbutton function is a handy tool for customizing and enhancing your editor's functionality. One common query that often pops up is about the various settings attributes you can use with this function. Let's dive into all the possible settings attributes in TinyMCE's addbutton function!

icon: This attribute allows you to specify the icon that will appear on the button.

Plaintext

editor.addbutton('mybutton', {
  icon: 'my-icon'
});

image: Use this attribute to set a custom image for the button.

Plaintext

editor.addbutton('mybutton', {
  image: 'path/to/image.png'
});

tooltip: The tooltip attribute lets you define the tooltip text that appears when hovering over the button.

Plaintext

editor.addbutton('mybutton', {
  tooltip: 'Click me for magic!'
});

onclick: With this attribute, you can define the action that should be triggered when the button is clicked.

Plaintext

editor.addbutton('mybutton', {
  onclick: function() {
    // Do something amazing here!
  }
});

stateSelector: Use this attribute to specify a CSS selector that determines the button's state.

Plaintext

editor.addbutton('mybutton', {
  stateSelector: 'button[disabled]'
});

text: This attribute allows you to set the text that will appear on the button.

Plaintext

editor.addbutton('mybutton', {
  text: 'Click Me'
});

stateClasses: Specify the CSS class names that should be applied when the button is in a certain state.

Plaintext

editor.addbutton('mybutton', {
  stateClasses: {
    active: 'active-class',
    disabled: 'disabled-class'
  }
});

onPostRender: Use this attribute to specify a function that should be executed after the button has been rendered.

Plaintext

editor.addbutton('mybutton', {
  onPostRender: function() {
    // Do post-render magic here!
  }
});

disabled: This attribute allows you to set the initial disabled state of the button.

Plaintext

editor.addbutton('mybutton', {
  disabled: true
});

shortcut: Specify a keyboard shortcut that triggers the button action.

Plaintext

editor.addbutton('mybutton', {
  shortcut: 'Ctrl+Shift+M'
});

By leveraging these settings attributes in the TinyMCE addbutton function, you can customize your editor's buttons to suit your specific needs. Experiment with different combinations to create a seamless and intuitive editing experience. Happy coding!

Related posts:

×