TinyMCE 更改现有按钮图标

Question

我在 html 表单中使用 TinyMCE 所见即所得编辑器。我想更改现有工具栏按钮的图标（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 doesn't seem help in deep customization. So I found cool third-party skin 有明显的地方可以存储这些图标 - img/sprites16px.png。所以我能够在图形编辑器中重新绘制它们中的任何一个。

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

Answer 3

TinyMce v5 的 CSS（适用于 IE 11、Firefox 67.x 和 Chrome 74）中的另一个解决方案：

请注意...[aria-label="Gras"]中的单词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;
    }

在这里，同样的例子在 Base64 中转换为 SVG :

    /*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 更改现有按钮图标

TinyMCE change existing button icon

javascript

jquery

wysiwyg

tinymce