如何更改 TinyMCE 4 的 "Remove Formatting" 按钮外观

Question

用于删除格式的 TinyMCE 4 按钮是 , which is certainly not intuitive to me. I'd like to make the button face something more obvious, like ，比如为其分配图像。但我找不到任何地方来改变按钮的面孔。分配给按钮的标记是

。

我不确定按钮上的 Tx 符号是如何得到的，但确实如此。

感谢您的帮助。

Answer 1

这些图标来自tinymce字体。对我来说，在 tinymce 源代码中，我的字体位于

tinymce/skins/lightgray/fonts/tinymce.woff|ttf|等

如果您使用自己的图标添加了自己的字体文件，它应该允许您更改图标

如果您检查 css，您会发现有两个部分控制所使用的图标

在标签内的 ::before 上

.mce-i-italic:before {
    content: "\e02b";
}

在 i 标签本身上

.mce-ico {
     font-family: tinymce, Arial
}

都来自skin.min.css

Answer 2

在skin.min.css变化

.mce-i-removeformat:before {
   content: "\e01d"; 
}

类似于

.mce-i-removeformat:before {
    background-image: url("http://i.stack.imgur.com/0rzf2.png");
    background-size: 15px 15px;
    background-repeat: no-repeat;
}

如果您的图片大小合适，您或许可以删除 background-size 和 background-repeat

如果您不想直接编辑 css，您可以创建一个新的 css 文件并在默认文件之后加载它以覆盖设置。如果这样做，您将不得不覆盖内容以删除原始图标

Answer 3

你怎么说你使用 :after 伪元素而不是新图像并删除 :before 一个。

这就是它的样子

https://jsfiddle.net/nj6yn4bq/4/

和代码

<button><i></i></button>

i:before { display: none; }
i:after {
    content: 'FMT';
    text-decoration: line-through;
    font-style: initial;
    font-size: 15px;
}

button { 
background: linear-gradient(#FFF,#E0E0E0);
padding: 0.7em;
border: 1px solid #DEDEDE;
border-radius: 3px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.22);

}

如何更改 TinyMCE 4 的 "Remove Formatting" 按钮外观

How to change the "Remove Formatting" button face for TinyMCE 4

css

tinymce-4