把WP-GeSHi-Highlight代码高亮插件集成到wordpress文本编辑器
511遇见 是基于Bootstrap框架的wordpress网站,代码高亮插件使用了WP-GeSHi-Highlight插件,但每次在文本编辑模式下我们都要根据代码类型插入pre,非常的不方便,很影响我们的编辑效率,所以我们自己动手给我们的编辑器附加一些常用功能。 以上图片是我编辑器使用的快捷按钮,在编辑文章代码时不用再手动输入标签,显得十分方便。先分享一下代码: /** * wordpress编辑器自定义WP-GeSHi-Highlight快捷标签按钮 */ add_action('admin_print_footer_scripts','eg_quicktags'); function eg_quicktags() { ?> } 代码解析:1、QTags.addButton( ); QTags.addButton( '','' ); 【四对引号,分别表示按钮的ID、按钮显示名、点一下输入内容、再点一下关闭内容(最后一对引号为空则一次输入全部内容),n表示换行】 QTags.addButton( '按钮ID','按钮显示名','点一下输入内容','点一下关闭内容' ); 可以自定义添加多行 QTags.addButton( ); 增加多个按钮! 2、ID必须不同,显示名称随便起个有意义的。 3、代码放在functions.php文件中,建议后面。 4、本站使用个WP是4.5.3完全兼容通过。 5、你如果使用的代码高亮插件是WP-GeSHi-Highlight,下面可以省略: (1)pre-css点击插入代码效果
(2)pre-php点击插入代码效果
(3)pre-html点击插入代码效果
(4)pre-js点击插入代码效果
为了输入代码方便,我们加入了空格,以上效果都是格式化后的效果,如果你对本站的代码高亮插件的样式感兴趣,建议阅读 WordPress代码高亮插件 WP-GeSHi-Highlight 由于本站基于Bootstrap所有其他都是Bootstrap集成的功能,你可以根据自己的需要添加自己最常用的代码插入按钮,方便自己在文本模式下编辑。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |