TinyMCE change existing button icon

0
votes

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.

3
javascriptjquerytinymcewysiwyg

3 Answers

2
votes

an other solution, in CSS (Work on IE 11, Firefox 67.x and Chrome 74) for TinyMce v5 :

Image example

Please note that the word Gras in ...[aria-label="Gras"] is a result of translate, so you must change it in your own code.

    /*Hide original svg:*/
    .tox-tbtn[aria-label="Gras"] .tox-icon svg {
        display: none;
    }

    /*Dimensions of svg icon:*/
    .tox-tbtn[aria-label="Gras"] .tox-icon {
        display: list-item;
        list-style: none;
        width: 18px;
        height: 18px;
    }

    /*Svg icon:*/
    [aria-label='Gras'].tox-tbtn .tox-icon {
        background-image: url("/build/admin/images/tinyMceBoutonGras.svg");
        background-repeat: no-repeat;
        background-position: center center;
    }

Here, the same example with SVG convert in Base64 :

    /*Hide original svg:*/
    .tox-tbtn[aria-label="Gras"] .tox-icon svg {
        display: none;
    }

    /*Dimensions of svg icon:*/
    .tox-tbtn[aria-label="Gras"] .tox-icon {
        display: list-item;
        list-style: none;
        width: 18px;
        height: 18px;
    }

    /*Svg icon (In base64):*/
    [aria-label='Gras'].tox-tbtn .tox-icon {
        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICBpZD0ic3ZnOCIgICB2ZXJzaW9uPSIxLjEiICAgdmlld0JveD0iMCAwIDQuNzYyNDk5OSA0Ljc2MjUwMDIiICAgaGVpZ2h0PSIxOCIgICB3aWR0aD0iMTgiPiAgPGRlZnMgICAgIGlkPSJkZWZzMiIgLz4gIDxtZXRhZGF0YSAgICAgaWQ9Im1ldGFkYXRhNSI+ICAgIDxyZGY6UkRGPiAgICAgIDxjYzpXb3JrICAgICAgICAgcmRmOmFib3V0PSIiPiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+ICAgICAgICA8ZGM6dHlwZSAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4gICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPiAgICAgIDwvY2M6V29yaz4gICAgPC9yZGY6UkRGPiAgPC9tZXRhZGF0YT4gIDxnICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLC0yOTIuMjM3NDgpIiAgICAgaWQ9ImxheWVyMSI+ICAgIDxnICAgICAgIGlkPSJ0ZXh0ODE3IiAgICAgICBzdHlsZT0iZm9udC1zdHlsZTpub3JtYWw7Zm9udC12YXJpYW50Om5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1zdHJldGNoOm5vcm1hbDtmb250LXNpemU6MTAuNTgzMzMzMDJweDtsaW5lLWhlaWdodDoxLjI1O2ZvbnQtZmFtaWx5OidBZG9iZSBNaW5nIFN0ZCc7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjonQWRvYmUgTWluZyBTdGQnO2xldHRlci1zcGFjaW5nOjBweDt3b3JkLXNwYWNpbmc6MHB4O2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MC4yNjQ1ODMzMiIgICAgICAgYXJpYS1sYWJlbD0iRyI+ICAgICAgPHBhdGggICAgICAgICBpZD0icGF0aDgxNCIgICAgICAgICBzdHlsZT0iZm9udC1zdHlsZTpub3JtYWw7Zm9udC12YXJpYW50Om5vcm1hbDtmb250LXdlaWdodDpib2xkO2ZvbnQtc3RyZXRjaDpub3JtYWw7Zm9udC1zaXplOjcuNzYxMTExMjZweDtmb250LWZhbWlseTpzYW5zLXNlcmlmOy1pbmtzY2FwZS1mb250LXNwZWNpZmljYXRpb246J3NhbnMtc2VyaWYgQm9sZCc7ZmlsbDojMjIyZjNlO2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDowLjE5NDkzODQ4IiAgICAgICAgIGQ9Im0gNC4zMDIwNjg0LDI5Ni41MDk1OSBxIC0wLjI3OTIwODgsMC4xMDg4OSAtMC43Mzk5MDM0LDAuMjE3NzggLTAuNDYwNjk0NCwwLjEwNjEgLTAuOTE4NTk2OCwwLjEwNjEgLTEuMDYwOTkzNSwwIC0xLjY2MTI5MjM5LC0wLjU3NTE2IC0wLjYwMDI5ODg4LC0wLjU3Nzk3IC0wLjYwMDI5ODg4LC0xLjU5NDI5IDAsLTAuOTY4ODUgMC42MDU4ODMwOCwtMS41NjA3OCAwLjYwNTg4Mjk5LC0wLjU5NDcxIDEuNjg5MjEzMTksLTAuNTk0NzEgMC40MTA0MzY5LDAgMC43ODE3ODQ2LDAuMDc1NCAwLjM3MTM0NzcsMC4wNzI2IDAuODI2NDU4MSwwLjI5MzE2IHYgMC45NzQ0NSBIIDQuMTY1MjU2IHEgLTAuMDc4MTc4LC0wLjA1ODcgLTAuMjI4OTUxMiwtMC4xNjQ3NCAtMC4xNTA3NzI3LC0wLjEwODg5IC0wLjI5MDM3NzEsLTAuMTg0MjcgLTAuMTYxOTQxMSwtMC4wODk0IC0wLjM3OTcyNCwtMC4xNTM1NyAtMC4yMTQ5OTA3LC0wLjA2NDMgLTAuNDU3OTAyNCwtMC4wNjQzIC0wLjI4NDc5MywwIC0wLjUxNjUzNjMsMC4wODM4IC0wLjIzMTc0MzIsMC4wODM4IC0wLjQxNjAyMSwwLjI1Njg4IC0wLjE3NTkwMTYsMC4xNjc1MiAtMC4yNzkyMDg5LDAuNDI3MTkgLTAuMTAwNTE1MSwwLjI1Njg3IC0wLjEwMDUxNTEsMC41OTQ3MSAwLDAuNjg5NjUgMC4zNjU3NjM1LDEuMDU1NCAwLjM2NTc2MzUsMC4zNjU3NyAxLjA4MDUzOCwwLjM2NTc3IDAuMDYxNDI2LDAgMC4xMzQwMjAyLC0wLjAwMyAwLjA3NTM4NiwtMC4wMDMgMC4xMzY4MTI0LC0wLjAwOCB2IC0wLjgxNTI4IEggMi4zODM5MDQgdiAtMC43ODQ1OCBoIDEuOTE4MTY0NCB6IiAvPiAgICA8L2c+ICA8L2c+PC9zdmc+);
        background-repeat: no-repeat;
        background-position: center center;
    }

Hope this help, Yan

0
votes

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