代码增强WordPress默认编辑器TinyMCE

2019-10-2020:11:57来源:94pianyidian 评论 1,144 views

WordPress默认编辑器为TinyMCE,初次使用WordPress的童鞋估计都不怎么看好这与生俱来的编辑器,可实现功能实在少得可怜...

也许有用编辑器插件解决烦恼的,也许有破罐子破摔的...

其实默认编辑器有很是强悍的功能的,只是被邪恶的隐藏了,通过以下的代码,Andy带你体验TinyMCE的强大,O(∩_∩)O哈哈~

实现功能一:显示可视化编辑器中的隐藏按钮

其实WordPress完整的编辑器是包含这些功能的:

加粗(bold)、斜体(italic)、下划线(underline)、删除线(strikethrough)、左对齐(justifyleft)、居中(justifycenter)、右对齐(justfyright)、两端对齐(justfyfull)、无序列表(bullist)、编号列表(numlist)、减少缩进(outdent)、缩进(indent)、剪切(cut)、复制(copy)、粘贴(paste)、撤销(undo)、重做(redo)、插入超链接(link)、取消超链接(unlink)、插入图片(image)、清除格式(removeformat)、帮助(wp_help)、打开HTML代码编辑器(code)、水平线(hr)、清除冗余代码(cleanup)、格式选择(formmatselect)、字体选择(fontselect)、字号选择(fontsizeselect)、样式选择(styleselect)、上标(sub)、下标(sup)、字体颜色(forecolor)、字体背景色(backcolor)、特殊符号(charmap)、隐藏按钮显示开关(wp_adv)、隐藏按钮区起始部分(wp_adv_start)、隐藏按钮区结束部分(wp_adv_end)、锚文本(anchor)、新建文本(类似于清空文本)(newdocument)、插入more标签(wp_more)、插入分页标签(wp_page)、拼写检查(spellchecker)。

效果图:

将以下代码添加到主题functions.php中即可:

//wordpress默认编辑器增强代码
function enable_more_buttons($buttons) {
$buttons[] = 'hr';
$buttons[] = 'sub';
$buttons[] = 'sup';
$buttons[] = 'fontselect';
$buttons[] = 'fontsizeselect';
$buttons[] = 'styleselect';
$buttons[] = 'backcolor';
$buttons[] = 'cleanup';
$buttons[] = 'wp_page';
return $buttons;
}
add_filter("mce_buttons_3", "enable_more_buttons");//添加到工具栏的第三行

上面的代码添加的按钮是Andy爱分享博客所使用的,实际上,在知更鸟的主题中也已经集成了,想要实现更多按钮的请各位童鞋自行添加哈,照葫芦画瓢添加就好~另,这段代码默认添加到编辑器工具栏的第三行,想要在第一行或者第二行显示的直接修改最后一句代码即可。

add_filter("mce_buttons", "enable_more_buttons");//添加到工具栏的第一行
add_filter("mce_buttons_2", "enable_more_buttons");//添加到工具栏的第二行

实现功能二:添加HTML编辑器中的自定义按钮
如果你使用了WordPress3.3.0版以上(Andy猜90%以上都是了吧 ^_^),即可以用以下方法快捷方便的在后台HTML编辑器中加入自定义按钮。效果图:

代码增强WordPress默认编辑器TinyMCE

第一步:创建一个js文件,粘贴如下代码并保存为my_quicktags.js,上传至你主题的js文件夹内。

QTags.addButton( 'hr', '横线', "n<hr />n", "" ); //快捷输入横线
QTags.addButton( 'h1', '标题1', "n<h1>", "</h1>n" ); //快捷输入标题1
QTags.addButton( 'h2', '标题2', "n<h2>", "</h2>n" ); //快捷输入标题2
QTags.addButton( 'h3', '标题3', "n<h3>", "</h3>n" ); //快捷输入标题3
QTags.addButton( 'wp_page', '分页按钮', "<!--nextpage-->n", "" ); //快捷输入分页符
//QTags.addButton( 'my_id', 'my button', 'n', 'n' );
//这儿共有四对引号,分别是按钮的ID、显示名、点一下输入内容、再点一下关闭内容(此为空则一次输入全部内容),n表示换行

第二步:在主题function.php文件中加入以下代码。

//添加HTML编辑器自定义按钮
add_action('admin_print_scripts', 'my_quicktags');
function my_quicktags() {
    wp_enqueue_script(
    'my_quicktags',
    get_stylesheet_directory_uri().'/js/my_quicktags.js',
    array('quicktags')
    );
};

这里的my_quicktags.js文件中添加的按钮也可以随个人意DIY的,给出的代码就方便的添加了分页符按钮,很是方便吧!

实现功能三:添加编辑器默认内容(编辑器内可见)

新建文章后编辑器里的内容默认是空的,有些童鞋做的是WordPress主题站、插件站或单纯的下载站,一些标准的格式化的内容每次都会输入,添加此功能后,这些重复性的工作以后再也不用了,一切都已预定义好了。如果发表文章不需要这些预定义的内容,只需要全选+Delete就OK,并不会很麻烦!

在主题functions.php文件中添加以下代码即可:

function insertPreContent($content) {
if(!is_feed() && !is_home()) {
$content.= "<div class='andyshare'>";
$content.= "<h4>欢迎来到Andy爱分享</h4>";
$content.= "这里的预定义内容在编辑器内可见——<a href='http://andyshare.com'>Andy爱分享</a>";
$content.= "</div>";
}
return $content;
}
add_filter ('default_content', 'insertPreContent');

实现功能四:添加编辑器默认内容(编辑器内不可见)
此方法添加的内容在发布文章时自动添加在内容的最后,在编辑的时候是看不见的,发布文章时候才能被看见,用于添加订阅、文章版权信息等等!

在主题functions.php文件中添加以下代码即可:

function insertFootNote($content) {
    if(!is_feed() && !is_home()) {
    $content.= "<div class='andyshare'>";
    $content.= "<h4>欢迎来到Andy爱分享</h4>";
    $content.= "这里的预定义内容在编辑器内不可见——<a href='http://andyshare.com'>Andy爱分享</a>";
    $content.= "</div>";
    }
    return $content;
}
add_filter ('the_content', 'insertFootNote');

说实话,这篇文章真的很不错,于是转载上来供大家参考,原文请到移步这里。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: