图标

最后更新：2026-11-04 10:10:15

概述

图标包为TinyMCE的工具栏按钮、菜单项和上下文工具栏提供视觉样式。当使用模块加载器打包TinyMCE时，可以包含图标包来自定义编辑器的外观。

TinyMCE包含开源和高级图标包：

开源图标包：所有TinyMCE安装版本均可使用
高级图标包：需要付费订阅TinyMCE才能使用

默认图标包始终必需，并提供基础图标集。可以捆绑额外的图标包来扩展或替换默认图标。

文件结构

本节展示每个TinyMCE图标包所需的文件。显示的文件路径相对于存储tinymce.min.js的TinyMCE根包目录。例如：

./
├── icons/
├── langs/
├── license.txt
├── models/
├── plugins/
├── readme.txt
├── skins/
├── themes/
├── tinymce.d.ts
├── tinymce.js
├── tinymce.min.js
└── version.txt

打包语法示例

以下示例展示如何使用不同的模块语法打包图标包。示例使用material图标包，但相同的语法适用于所有可用图标包。

模块语法	来源	示例
ES6+	npm（开源）	import 'tinymce/icons/material';
	npm（高级）	import 'tinymce-premium/icons/material';
	`.zip`	import '../tinymce/icons/material/icons';
Common JS	npm（开源）	require('tinymce/icons/material');
	npm（高级）	require('tinymce-premium/icons/material');
	`.zip`	require('../tinymce/icons/material/icons.js');

来自`tinymce-premium`（NPM）的高级图标包

tinymce-premium NPM包将所有高级图标包放在tinymce-premium/icons/中。根据TinyMCE的部署方式选择以下模式之一：

打包（推荐用于现代构建工具）

导入所需的图标包，以便模块打包器将其添加到应用程序包中。例如：

import 'tinymce/icons/default'; // 始终必需import 'tinymce-premium/icons/material';// ... 其他 TinyMCE 导入

打包后，在编辑器配置中设置icons: 'material'（或任何已导入的图标包）。

非打包方法

使用文件分层的非打包方法

当直接从node_modules托管时，作为构建或部署步骤的一部分（例如在postinstall脚本中），将node_modules/tinymce-premium/icons/复制到node_modules/tinymce/icons/。
复制完成后，高级图标包与核心文件并存，因此设置icons无需额外配置即可生效。

使用icons_url的非打包方法

将高级图标包保留在node_modules/tinymce-premium/icons/中，并配置icons_url指向所需的图标包文件。
这种方法无需移动文件，适用于node_modules目录可通过网络访问的情况（或将特定图标包仅复制到公共文件夹的情况）。

可用图标包

开源图标包

这些图标包随所有TinyMCE安装版本提供：

默认图标

./icons/default/icons.js

默认图标包始终必需，并为所有TinyMCE功能提供基础图标集。

高级图标包

这些图标包需要付费订阅TinyMCE才能使用。欲了解更多信息，请参阅：增强皮肤和图标包。

Bootstrap图标

./icons/bootstrap/icons.js

Bootstrap风格的图标，可与Bootstrap皮肤及其他现代界面搭配使用。

Jam图标

./icons/jam/icons.js

来自JAM图标库的简洁、极简图标，非常适合现代Web应用程序。

Material图标

./icons/material/icons.js

Material Design图标，可与受Material Design启发的皮肤搭配使用。

小图标

./icons/small/icons.js

紧凑型图标，专为较小的工具栏按钮和空间受限的界面设计。

细图标

./icons/thin/icons.js

纤细、轻量级的图标，视觉重量极小，非常适合简洁、现代的设计。

在编辑器配置中使用

打包图标包后，通过设置icons选项来配置编辑器以使用该图标包：

tinymce.init({
  selector: 'textarea',
  icons: 'material',  // 使用已打包的 material 图标包
  plugins: [
    "advlist", "anchor", "autolink", "charmap", "code", "fullscreen",
    "help", "image", "insertdatetime", "link", "lists", "media",
    "preview", "searchreplace", "table", "visualblocks",
  ],
  toolbar: "undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
});

故障排除

图标未显示：请确保图标包已正确打包，且 icons 选项与打包的图标包名称匹配。

图标缺失：默认图标包始终是必需的。额外的图标包用于扩展或替换默认图标，但它们本身并不提供所有必需的图标。

构建错误：请验证图标包路径是否正确，以及该图标包是否存在于您的 TinyMCE 安装中。

图标

概述