iconMap richtoolbar

What is iconMap richtoolbar?#

iconMap richtoolbar is a feature in the RichTextEditor (RTE) that allows the user to add custom icons to the toolbar. This feature is especially useful when you want to add your own custom actions or commands to the RTE toolbar.

How to Use iconMap richtoolbar#

The iconMap richtoolbar feature can be used by defining an array of buttons in the configuration of the RichTextEditor. Each button in the array should have a name, a label, and an icon.

const icons = [
  {name: 'customAction', label: 'Custom Action', icon: 'path/to/custom-icon.png'}
];

const rteConfig = {
  toolbar: {
    items: ['bold', 'italic', '|', 'customAction']
  },
  iconMap: {
    customAction: icons[0].icon
  }
};

In the above code snippet, we have defined an array of custom icons and added a new button called "customAction" to the RTE toolbar. We have then added the custom icon to the iconMap using the name of the button as the key and the icon path as the value.

Alternative Ways to Use iconMap richtoolbar#

Another way to use the iconMap richtoolbar feature is by defining a function that returns an HTML string for the custom icon. This can be useful when you want to create more complex icons that cannot be represented by an image file.

const icons = {
  customAction: function() {
    return '<span class="material-icons">custom_icon</span>';
  }
};

const rteConfig = {
  toolbar: {
    items: ['bold', 'italic', '|', 'customAction']
  },
  iconMap: icons
};

In the above code snippet, we have defined an object with a single property called "customAction". The value of the property is a function that returns an HTML string for the custom icon. We have then added the custom icon to the iconMap using the name of the button as the key and the function as the value.

Conclusion#

In summary, the iconMap richtoolbar feature in the RichTextEditor allows the user to add custom icons to the toolbar. This can be done by defining an array of buttons or a function that returns an HTML string for the custom icon. This feature is especially useful when you want to add your own custom actions or commands to the RTE toolbar.