一为博客后台一直使用传统编辑器,就是 TinyMCE 编辑器,那个古腾堡用不惯 然后想到主题编辑器添加一些段代码的按钮,而默认的 TinyMCE 编辑器图标就只有几个,完全不满足我折腾的心,就谷歌了一下有没有方法,还真有,这里记录改进分享一下 。比如添加一个“插入音乐播放器”的按钮,TinyMCE 编辑器图标库没有音乐图标,我们就可以使用其他的图标库,这里我使用 FontAwesome 图标库。
你主题必须引用了 FontAwesome 图标库,或者你自己引入,引入方法一为就不介绍了,百度一堆。
/*添加音乐播放器短代码按钮*/ ed.addButton( 'aplayerbox', { title : '插入音乐播放器', icon: 'music', onclick : function() { ed.selection.setContent('[music]' + 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 里要记得加“\” 。
就这么简单,去后台刷新缓存看看把。我添加的按钮,都知道是啥不?
最后听首歌
1234 ( VIP 1 )
河南阿文v
产生 ( VIP 1 )
四川饿