如何更改TinyMCE 4的“删除格式”按钮面

Question

删除格式的TinyMCE 4按钮是，这对我来说当然不直观。我想让按钮面对一些更明显的东西，比如 by，比如分配一个图像。但我找不到任何改变按钮面的方法。分配给按钮的标记是

。

我不确定按钮上的Tx符号是如何获得的，但它确实存在。

感谢您的帮助。

Answer 1

这些图标来自tinymce字体。对于我来说，我有

字体

TinyMCE的/皮/浅灰色/字体/ tinymce.woff | TTF |等

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

如果您检查css，您会注意到有两个部分可以控制正在使用的图标

在标签内的::之前

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

<标签本身上的

.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

你怎么说而不是你使用的新图像：在伪元素之后并删除：在一个之前。

这就是它的外观

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);

}