html中编辑器制作goole图标,TinyMCE 编辑器添加 FontAwesome 自定义图标按钮

一为博客后台一直使用传统编辑器，就是 TinyMCE  编辑器，那个古腾堡用不惯

然后想到主题编辑器添加一些段代码的按钮，而默认的 TinyMCE  编辑器图标就只有几个，完全不满足我折腾的心，就谷歌了一下有没有方法，还真有，这里记录改进分享一下

。比如添加一个“插入音乐播放器”的按钮，TinyMCE  编辑器图标库没有音乐图标，我们就可以使用其他的图标库，这里我使用 FontAwesome 图标库。

(adsbygoogle = window.adsbygoogle || []).push({});

你主题必须引用了 FontAwesome 图标库，或者你自己引入，引入方法一为就不介绍了，百度一堆。

/*添加音乐播放器短代码按钮*/

ed.addButton( 'aplayerbox', {

title : '插入音乐播放器',

icon: 'music',

onclick : function() {

ed.selection.setContent('' + ed.selection.getContent() + '');

}

});

如上方代码，定义一个icon:music,然后我们再在font-awesome.css文件里添加几行代码，记住后台要引用font-awesome.css文件。

i.mce-i-music:before {

content: "\f001"; /*music图标在FontAwesome图标库中的字码点*/

font-family: FontAwesome;

}

注意上面 css 的格式i.mce-i-js里定义的图标名称:before，然后去 FontAwesome 网站查music图标在图标库中的字码点，下图 Unicode: 后面接的4个字符，写入 CSS 里要记得加“\” 。

就这么简单，去后台刷新缓存看看把。我添加的按钮，都知道是啥不？

最后听首歌