严选品质
正规商家

大前端DUX主题WordPress5.x经典编辑器添加pre标签及删除按钮教程

站长自使用大前端DUX主题以来,很多时间需要用到代码高亮,也试过不少插件。换来换去,个人还是觉得pre好用。但是wordpress经典编辑器的文本里少个代码的快捷方式。网上搜了下有很多不同的方案。选了一个还算凑合用,除了能增加自定义按钮,还可以删除原来的按钮。因为所有代码已经经过测试,所以就直接发代码吧。将以下代码添加到当前使用主题的functions.php,新版大前端DUX主题用户直接放在functions-theme.php

//veidc.com 添加HTML编辑器pre标签按钮
add_action('after_wp_tiny_mce', 'add_button_mce');
function add_button_mce($mce_settings) {
?>
<script type="text/javascript">
QTags.addButton( 'eg_pre', 'pre', '<pre></pre>', '', 'q' );  //新增按钮
edButtons[120]=null;  //删除按钮
</script>
<?php
}

代码解释

//新增按钮行为新增需要的按钮。

//删除按钮行120为所需的参数,具体参数可以查看当前wordpress版本的/wp-includes/js/quicktags.js

这里展示5.2.4版本里的具体参数,按自己需求删除即可。

	edButtons[10]  = new qt.TagButton( 'strong', 'b', '<strong>', '</strong>', '', '', '', { ariaLabel: quicktagsL10n.strong, ariaLabelClose: quicktagsL10n.strongClose } );
	edButtons[20]  = new qt.TagButton( 'em', 'i', '<em>', '</em>', '', '', '', { ariaLabel: quicktagsL10n.em, ariaLabelClose: quicktagsL10n.emClose } );
	edButtons[30]  = new qt.LinkButton(); // special case
	edButtons[40]  = new qt.TagButton( 'block', 'b-quote', '\n\n<blockquote>', '</blockquote>\n\n', '', '', '', { ariaLabel: quicktagsL10n.blockquote, ariaLabelClose: quicktagsL10n.blockquoteClose } );
	edButtons[50]  = new qt.TagButton( 'del', 'del', '<del datetime="' + _datetime + '">', '</del>', '', '', '', { ariaLabel: quicktagsL10n.del, ariaLabelClose: quicktagsL10n.delClose } );
	edButtons[60]  = new qt.TagButton( 'ins', 'ins', '<ins datetime="' + _datetime + '">', '</ins>', '', '', '', { ariaLabel: quicktagsL10n.ins, ariaLabelClose: quicktagsL10n.insClose } );
	edButtons[70]  = new qt.ImgButton(); // special case
	edButtons[80]  = new qt.TagButton( 'ul', 'ul', '<ul>\n', '</ul>\n\n', '', '', '', { ariaLabel: quicktagsL10n.ul, ariaLabelClose: quicktagsL10n.ulClose } );
	edButtons[90]  = new qt.TagButton( 'ol', 'ol', '<ol>\n', '</ol>\n\n', '', '', '', { ariaLabel: quicktagsL10n.ol, ariaLabelClose: quicktagsL10n.olClose } );
	edButtons[100] = new qt.TagButton( 'li', 'li', '\t<li>', '</li>\n', '', '', '', { ariaLabel: quicktagsL10n.li, ariaLabelClose: quicktagsL10n.liClose } );
	edButtons[110] = new qt.TagButton( 'code', 'code', '<code>', '</code>', '', '', '', { ariaLabel: quicktagsL10n.code, ariaLabelClose: quicktagsL10n.codeClose } );
	edButtons[120] = new qt.TagButton( 'more', 'more', '<!--more-->\n\n', '', '', '', '', { ariaLabel: quicktagsL10n.more } );
	edButtons[140] = new qt.CloseButton();

效果展示:

大前端DUX主题WordPress5.x经典编辑器添加pre标签及删除按钮教程

赞(0)
未经允许不得转载:主机推广 » 大前端DUX主题WordPress5.x经典编辑器添加pre标签及删除按钮教程