TinyMCE图标来自图标包。TinyMCE包含开源和高级图标包，但也允许集成人员添加自定义图标或使用自己的图标覆盖TinyMCE图标。

默认图标包随TinyMCE一起提供，无需任何配置，但在捆绑部署时必须导入：例如：

import 'tinymce/icons/default';

可以使用icons和icons_url设置替换默认图标。

可用的图标包

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

  • 开源：default（始终需要）

  • 高级：bootstrap、jam、material、small、thin（需付费订阅）

有关哪个图标包最适合哪个皮肤的信息，请参阅：图标包兼容性矩阵。

自定义图标包

有关创建自定义图标包的信息，请参阅：为TinyMCE创建图标包。

传递给icons的值必须与以下定义的包名匹配：

  • 通过JavaScript注册图标包时传递给tinymce.IconManager.add的值；或

  • 使用图标包模板创建图标包时在package.json的iconPackName字段中指定的值。

替换默认图标包

有两个与替换TinyMCE中图标相关的选项：icons和icons_url。

  • icons指定使用哪个图标包。

  • icons_url指定何处可以找到该图标包（如果它不在默认位置）。

如果仅配置了icons，TinyMCE将尝试从TINYMCE_BASE/icons/${iconPackName}/icons.js加载指定的图标包；其中：

  • TINYMCE_BASE是TinyMCE根目录（包含tinymce.min.js的目录）。

  • ${iconPackName}是图标包的名称。

要从其他位置加载图标包，集成人员必须使用icons_url指定该位置。

  • 当使用Tiny Cloud提供的TinyMCE、ZIP捆绑包或NPM包（带有捆绑或文件分层）时，只需要icons。

  • 当使用自定义图标包或使用不带捆绑的NPM包时，很可能还需要icons_url。

icons

icons选项允许使用图标包扩展或替换编辑器图标。图标包通过名称指定。

类型：String

初始化时，TinyMCE将尝试加载由icons选项指定的任何图标包。图标包中的图标将与TinyMCE的默认图标合并，并且图标包中的图标将覆盖具有相同标识符的默认图标。

示例：使用高级图标包

tinymce.init({
  selector: 'textarea',
  icons: 'material',  // 使用Material Design图标
  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",
});

示例：使用与皮肤和内容样式匹配的图标包

tinymce.init({
  selector: 'textarea',
  icons: 'bootstrap',  // 使用Bootstrap图标
  skin: 'bootstrap',   // 与Bootstrap皮肤匹配
  content_css: 'bootstrap',  // 使用Bootstrap内容样式
});

icons_url

icons_url选项允许集成人员指定加载图标包的非默认位置。当TinyMCE和图标包从不同位置加载时，这很有用。例如：当从Tiny Cloud加载TinyMCE时，图标包可以从不同的Web服务器加载。

类型：String

初始化时，TinyMCE将尝试从icons_url指定的位置加载由icons选项指定的任何图标包。图标包中的图标将与TinyMCE的默认图标合并，并且图标包中的图标将覆盖具有相同标识符的默认图标。

理解icons_url和icons的组合使用：

使用icons_url时，还必须指定icons选项：

  • icons_url - 告诉TinyMCE图标包文件在何处。

  • icons - 告诉TinyMCE从加载的文件中哪个图标包。

示例：

tinymce.init({
  selector: 'textarea',
  icons_url: 'dist/icons/my_icon_pack/icons.js', // 在何处找到它
  icons: 'my_icon_pack',  // 使用哪个包
  // ... 其他选项
});

用法

要从其他位置使用 TinyMCE 图标包：

  1. 确保图标包在指定的 URL 可用。

  2. 向 tinymce.init 添加 icons_url 选项。

  3. 使用 icons 设置指定图标包名称。

示例：使用 icons_url

tinymce.init({
  selector: 'textarea',  // 根据HTML修改此值
  icons_url: 'https://www.example.com/icons/my_icon_pack/icons.js', // 从不同位置加载图标包
  icons: '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",
});

示例：从 tinymce-premium (NPM) 加载高级图标

安装 tinymce-premium NPM 包时，高级图标包存储在 node_modules/tinymce-premium/icons/ 中。配置 icons_url 指向所需图标包文件。路径相对于 TinyMCE 的加载位置。例如：

tinymce.init({
  selector: 'textarea',
  icons_url: '../../node_modules/tinymce-premium/icons/material/icons.js',
  icons: 'material'
});

  • 确保 node_modules 目录（或图标包文件的副本）可由浏览器访问。许多项目在构建步骤中将所需图标包复制到公共文件夹（如 /public/icons/material/icons.js），并相应地更新 icons_url。

  • 将此方法与 来自 tinymce-premium 的高级图标包 中列出的方法结合使用，以匹配部署策略。