WordPress自带TinyMCE编辑器增强

WordPress

更改编辑器默认视图为 HTML

大家都知道,在后台新建文章后,编辑器就自动跳转到“可视化”视图,对于一些经常要插入代码或者 WEB 设计者们来说,可能更习惯使用 HTML 视图手动编辑。

设置方法:将以下代码添加到主题的 functions.php 文件里即可:

add_filter('wp_default_editor', create_function('', 'return "html";'));

添加编辑器默认内容(编辑器内可见)

新建文章后编辑器里的内容默认是空的,有些朋友做的是 WordPress 主题站、插件站或单纯的下载站,一些标准的格式化的文章每次都会输入“主题名称”、“主题作者”、“下载地址”等内容,添加默认内容之后,这些重复性的工作以后再也不用了,一切都预定义好了。而且如果发表文章不需要这些预定义的内容,只需要全选-Delete 就 ok 了,并不会很麻烦。

设置方法:在主题 functions.php 文件添加以下代码即可:

function insertPreContent($content) {
        if(!is_feed() && !is_home()) {
 $content.= "这里的预定义内容在编辑器可见";
        }
        return $content;
}
add_filter ('default_content', 'insertPreContent');

添加编辑器默认内容(编辑时不可见)

此方法添加的内容在发布文章时自动添加在内容的最后,在编辑的时候是看不见的,用于添加订阅、文章版权信息等等。

设置方法:在主题 functions.php 文件添加以下代码即可:

function insertFootNote($content) {
        if(!is_feed() && !is_home()) {
 $content.= "这里的预定义内容在编辑器不可见";
        }
        return $content;
}
add_filter ('the_content', 'insertFootNote');

添加更多的 HTML 标签(慎用)

此功能请慎用,因为 WordPress 自带的 TinyMCE 编辑器会默认过滤掉不符合 XHTML 1.0 中的 html 标签,如 br、iframe 等。但不排除某些情况下也可能会用到这些标签,所以把方法放出来供大家参考吧。

添加方法:将以下代码粘贴到主题的 functions.php 文件里即可:

function fb_change_mce_options($initArray) {
$ext = 'pre[id|name|class|style],iframe[align|longdesc|
name|width|height|frameborder|scrolling|marginheight|
marginwidth|src]';  //注意:格式为“标签一[属性一|属性二],标签二[属性一|属性二|属性三]”
if ( isset( $initArray['extended_valid_elements'] ) ) {
$initArray['extended_valid_elements'] .= ',' . $ext;
} else {
$initArray['extended_valid_elements'] = $ext;
}
return $initArray;
}
add_filter('tiny_mce_before_init', 'fb_change_mce_options');

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 文件里即可:

/* 后台编辑器强化
/* --------------- */
function add_more_buttons($buttons){
    $buttons[] = 'fontsizeselect';
    $buttons[] = 'styleselect';
    $buttons[] = 'fontselect';
    $buttons[] = 'hr';
    $buttons[] = 'sub';
    $buttons[] = 'sup';
    $buttons[] = 'cleanup';
    $buttons[] = 'image';
    $buttons[] = 'code';
    $buttons[] = 'media';
    $buttons[] = 'backcolor';
    return $buttons;
}
add_filter("mce_buttons_3", "add_more_buttons");//添加到工具栏的第三行

/* 后台编辑器默认文本视图,防止修改文章切换视图导致代码转义
/* ---------------------------------------------------------- */
//add_filter('wp_default_editor', create_function('', 'return "html";'));

/* HTML 转义
/* --------- */
//取消内容转义
remove_filter('the_content', 'wptexturize');
//取消摘要转义
//remove_filter('the_excerpt', 'wptexturize');
//取消评论转义
//remove_filter('comment_text', 'wptexturize');

让编辑器支持中文拼写检查

WordPress 自带 TinyMCE 编辑器默认对英文拼写进行检查,怎么样才能让其支持中文拼写检查呢?

设置方法:在主题的 functions.php 文件里添加如下代码即可:

function fb_mce_external_languages($initArray){
$initArray['spellchecker_languages'] = '+Chinese=zh,
English=en';

return $initArray;
}
add_filter('tiny_mce_before_init', 'fb_mce_external_languages');

简单添加自定义按钮

如果你使用了 WordPress4.0 最新版,可以用以下方法快捷方便的在后台 HTML 编辑器中加入自定义按钮。

步骤一:首先创建一个 js 文件,粘贴如下代码并保存为 my_quicktags.js 文件:

QTags.addButton( 'hr', '水平线', "\n\n", '' );//添加横线
QTags.addButton( 'h1', 'H1', '\n', "" ); //添加标题 1
QTags.addButton( 'h2', 'H2', '\n', ""  ); //添加标题 2
QTags.addButton( 'h3', 'H3', '\n', "" ); //添加标题 3
QTags.addButton( 'p', 'P', '\n\n\n', "" );//添加段落
//这儿共有四对引号,分别是按钮的 ID、显示名、点一下输入内容、再点一下关闭内容(此为空则一次输入全部内容),
表示换行。

步骤二:把刚才写好的 my_quicktags.js 放在主题文件夹,再在主题 functions.php 中加入代码:

/* 后台编辑器文本模式添加短代码快捷输入按钮
/* ------------------------------------------ */
function my_quicktags() {
    wp_enqueue_script('my_quicktags',get_stylesheet_directory_uri().'/js/my_quicktags.js',array('quicktags'));
}
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'));
}
add_action('admin_print_scripts', 'my_quicktags');

© 声明:本站原创文章采用BY-NC-SA创作共用协议,转载时请标明本文地址;非原创(转载)文章版权归原作者所有。

RECENT POSTS

Stay Hungry. Stay Foolish.

数据库查询次数:11次,页面生成时间:0.030秒。