站长视角
用户至上

大前端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();

效果展示:

赞(0)
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权, 转载请注明出处。
文章名称:《大前端DUX主题WordPress5.x经典编辑器添加pre标签及删除按钮教程》
文章链接:https://cnidc.co/11159.html
【声明】:国外主机测评仅分享信息,不参与任何交易,也非中介,所有内容仅代表个人观点,均不作直接、间接、法定、约定的保证,读者购买风险自担。一旦您访问国外主机测评,即表示您已经知晓并接受了此声明通告。
【关于安全】:任何 IDC商家都有倒闭和跑路的可能,备份永远是最佳选择,服务器也是机器,不勤备份是对自己极不负责的表现,请保持良好的备份习惯。

登录

找回密码

注册