记一次tinymce自定义图标经历

tinymce简介

tinymce是一个很强大的富文本编辑器，可自定义图标自定义工具等等，这篇文章主要讲如何自定义图标。刚开始我在中文网站上看到有自定义图标的demo但是没有讲如何做的完整步骤，有点不明白，后来发现是自己领悟太低了，接下来我就把我自定义图标的完整过程写出来。

tinymce官网

英文还可以建议看英文官网更全面

中文官网：http://tinymce.ax-z.cn/

英文官网：https://www.tiny.cloud/docs/

第一种：根据中文官网快速更换默认图标

第一步：去中文官网找到多彩图标这个案例

第二步：进去之后，下载示例js

第三步：在配置中配置icons_url参数，这个参数就是配置你刚刚那个js文件的路径。icons就是配置包名，在那个js文件中的第一个参数。配置完这两个参数就可以达到你想要的效果啦。要改变tinymce原有的图标必须和js文件中icon名称叫的和默认图标的名称一样。例如table，你那个js文件有个icon叫table，svg是任意图标，这时重新启动后就会加载你的图标。

补充说明：刚刚那个js文件的解释说明

你只需要跟换icon名称对应的svg即可，包名可以修改，但是tinymce.IconManager.add()这个函数必须这么写。

因为tinymce自定义大于默认，所以你不需要更改的要删掉。

tinymce默认图标名称对应表

看这篇博客：https://blog.csdn.net/qq_34114082/article/details/90024080

第二种：根据英文官网创建图标包

英文官网给出了自己如何创作icons对应js文件的全过程，就是我们刚刚在中文官网下载的那个js文件的创造过程。

英文地址：https://www.tiny.cloud/docs/advanced/creating-an-icon-pack/#howiconsworkintinymce

我接下来大概说一下，翻译一下英文官网的过程

前提条件：

1.node.js和npm已安装

有开发vue或者react等单页面应用的经验更好，没有也ok

第一步：使用git命令下载脚手架（或者直接访问这个git地址，下载zip包）

$ git clone https://github.com/tinymce/oxide-icon-pack-template.git

第二步：使用vscode或者其他前端编辑器打开这个项目

第三步：使用npm install命令安装依赖，此时会提示要你输入包名，这个名称就是生成js后的icon包名

第四步：你就可以开发了

你需要把svg文件放到src/svg文件夹下，记住一定是svg文件，后缀为.svg的文件，例如下图这种文件，文件名称就是icon的名称，内容就是你写的svg。如果对svg没有研究或者不会写可以去阿里巴巴矢量图标中心下载。

阿里巴巴矢量图标地址：https://www.iconfont.cn/  超赞的图标库

第五步：使用npx gulp命令打包编译

第六步：在dist\icons\myicon下的文件icons.js就是最终的文件啦

如果不是专门做前端的不建议使用这种方式去编写自己的图标包，因为笔者（我是后端人员）做过发现效果不理想，可能是因为我不会调打包配置文件，这个打包的工具会把很多svg属性忽略掉导致得不到最终的效果，直接去阿里巴巴图标网站复制svg然后直接更改你下载的js文件比较直接效果也会更好。