TinyMCE中的图标如何工作?

时间:2017-01-05 15:25:54

标签: tinymce-4

我似乎无法在互联网上找到关于此的任何信息,但是TinyMCE 4中的图标如何工作?

我知道我可以按名称指定按钮的图标,并为我的自定义按钮指定自定义图标,但如果我想采用其中一个标准图标,在图像编辑应用程序中修改它然后将其另存为自定义图标该怎么办? 。我从哪里获得该图标的源图像?我在哪里可以看到可用图标及其名称的完整列表?

1 个答案:

答案 0 :(得分:6)

所以,这可能是对我自己的问题的部分回答,或者至少是我根据TinyMCE 4这个方面目前存在的糟糕文档而设法理解的。

TinyMCE 4.x中的图标使用自定义IcoMoon字体。此字体的文件位于skins // fonts目录中。

如果您download the TinyMCE Dev Package,您可以在js / tinymce / skins / lightgray / Icons.less中找到可用于该特定皮肤的所有图标,您将能够将这些图标用于自定义按钮(如果你正在使用那种皮肤)。

您需要使用“-i-”和“:before”之间的单词。例如如果Icons.less中的定义是:

.@{prefix}-i-alignleft:before

您可以使用关键字alignleft作为自定义按钮的图标。

我没有为默认设置添加更多图标,但我想这将涉及创建一个新主题,希望继承父主题,并定义自己的Icons.less文件,然后处理该LESS文件为您的主题生成适当的CSS。