Как работают иконки в TinyMCE?

Question

Кажется, я не могу найти какую-либо информацию об этом на веб-страницах, но как работают значки в TinyMCE 4?

Я знаю, что могу указать значки для кнопок по имени и указать собственные значки для своих пользовательских кнопок, но что, если я захочу взять один из стандартных значков, измените его в приложении для редактирования изображений, а затем сохраните его как собственный значок. Где я могу получить исходное изображение для этой иконки? Где я могу увидеть полный список доступных иконок и их названия?

Answer 1

Итак, вот, возможно, частичный ответ на мой собственный вопрос или, по крайней мере, то, что мне удалось понять, основываясь на скудной документации, которая в настоящее время существует для этого аспекта TinyMCE 4.

Иконки в TinyMCE 4.x используют собственный шрифт IcoMoon. Файлы для этого шрифта находятся в каталоге skins//fonts.

Если вы загрузите TinyMCE Dev Package, вы можете найти в js/tinymce/skins/lightgray/Icons.less все значки, доступные для этого конкретного скина, и вы сможете использовать эти значки для своих пользовательских кнопок (если вы используя эту кожу).

Вам нужно использовать слово между "-i-" и ": до". например, если определение в Icons.less:

.@{prefix}-i-alignleft:before

Вы можете использовать ключевое слово alignleft как значок для вашей пользовательской кнопки.

Я не дошел до того, чтобы добавить больше значков в набор по умолчанию, но я предполагаю, что это потребует создания новой темы, надеюсь, наследования от родительской темы, определения собственного файла Icons.less и последующей обработки этого файла LESS для генерации. соответствующий CSS для вашей темы.