把WP-GeSHi-Highlight代码高亮插件集成到wordpress文本编辑器

511遇见

以上图片是我编辑器使用的快捷按钮,在编辑文章代码时不用再手动输入标签,显得十分方便。先分享一下代码:

  1. /**
  2. * wordpress编辑器自定义WP-GeSHi-Highlight快捷标签按钮
  3. */
  4. add_action('admin_print_footer_scripts','eg_quicktags');
  5. function eg_quicktags() {
  6. ?>
  7.  <script type="text/javascript" charset="utf-8">
  8. QTags.addButton( 'eg_pre', 'pre', ' <pre>\n\n </pre>', '', 'q' );
  9. QTags.addButton( 'css_pre', 'pre-css', ' <pre lang="css" line="1" escaped="true">\n\n </pre>', '', 'c' );
  10. QTags.addButton( 'phs_pre', 'pre-php', ' <pre lang="php" line="1" escaped="true">\n\n </pre>', '', 'p' );
  11. QTags.addButton( 'html_pre', 'pre-html', ' <pre lang="html" line="1" escaped="true">\n\n </pre>', '', 'h' );
  12. QTags.addButton( 'js_pre', 'pre-js', ' <pre lang="JavaScript" line="1" escaped="true">\n\n </pre>', '', 'js' );
  13. QTags.addButton( 'p_p', 'p-zhy', ' <p class="alert alert-info" role="alert"> <strong>xxx  </strong> ......  </p>', '', 'zy' );
  14. QTags.addButton( 'h_3', 'h-3', ' <h3 class="text-primary"> <strong> xxx  </strong></h3>', '', 'h3' );
  15.  </script>
  16.  <?php
  17. }

代码解析:

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点击插入代码效果
  1.  <pre lang="css" line="1" escaped="true">
  2.  
  3.   </pre>
    (2)pre-php点击插入代码效果
  1.  <pre lang="php" line="1" escaped="true">
  2.  
  3.   </pre>
    (3)pre-html点击插入代码效果
  1.  <pre lang="html" line="1" escaped="true">
  2.  
  3.   </pre>
    (4)pre-js点击插入代码效果
  1.  <pre lang="JavaScript" line="1" escaped="true">
  2.  
  3.   </pre>

为了输入代码方便,我们加入了空格,以上效果都是格式化后的效果,如果你对本站的代码高亮插件的样式感兴趣,建议阅读

WordPress代码高亮插件 WP-GeSHi-Highlight

由于本站基于Bootstrap所有其他都是Bootstrap集成的功能,你可以根据自己的需要添加自己最常用的代码插入按钮,方便自己在文本模式下编辑。


发布日期:

所属分类: Wordpress 插件 标签: