Question

我在我的html表单中使用了TinyMCE WYSIWYG编辑器。我想更改现有工具栏按钮的图标（16x16图像），即粗体按钮，斜体按钮等。想法是放置我自己的图纸而不是基本 B ， I 等图标。

我找到了如何通过tinymce.Editor.addButton('myButton', {... 'image': '/path/to/my/drawing'})方法将自定义图标添加到工具栏的全新按钮，但我仍然不知道如何替换现有按钮的图标。

Answer 1

试试这个 https://www.tinymce.com/docs/configure/content-appearance/

http://www.wpbeginner.com/wp-tutorials/how-to-add-custom-styles-to-wordpress-visual-editor/

How to apply CSS on custom buttons in tinyMCE active editor popup

Answer 2

我找到了解决方案，但可能你知道更简单的方法，所以随时回答。

可以通过为TinyMCE创建自己的皮肤来完成。但是皮肤看起来不容易创建，而TinyMCESkinCreator似乎对深度定制没有帮助。所以我发现cool third-party skin有明显的存储这些图标的地方 - img/sprites16px.png。所以我能够在图形编辑器中重绘它们。

我通过编辑spritelist成功地将 B 字母替换为粗体俄语字母Ж：

Answer 3

TinyMce v5的CSS（在IE 11，Firefox 67.x和Chrome 74上运行）的另一种解决方案：

Image example

请注意，Gras中的...[aria-label="Gras"]一词是翻译的结果，因此您必须在自己的代码中对其进行更改。

    /*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;
    }

这里，与SVG相同的示例在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;
    }

希望这项帮助，

TinyMCE更改现有按钮图标

3 个答案: