Search code examples
javascriptjquerytinymcewysiwyg

TinyMCE change existing button icon


I'm using TinyMCE WYSIWYG editor in my html form. I want to change icons (16x16 images) of existing toolbar buttons, i.e. bold button, italic button, etc. The idea is to put my own drawings instead of basic B, I, etc icons.

I found how to add a brand new button with my custom icon to toolbar via tinymce.Editor.addButton('myButton', {... 'image': '/path/to/my/drawing'}) method, but I still have no idea how to replace icons for already existing buttons.


Solution

  • I found the solution, but probably you know easier ways, so feel free to answer.

    It could be done by creating your own skin for TinyMCE. But skins don't look easy to create and TinyMCESkinCreator doesn't seem help in deep customization. So I found cool third-party skin which has evident place for storing of these icons - img/sprites16px.png. So I was able to redraw any of them in graphic editor.

    I successfully replaced B letter for bold to russian letter Ж by editing the spritelist:

    my result