自从用上 WordPress 以来我不知道换了多少个后台编辑器了,从 FCKEditor 到 CKeditor,甚至还有一些名不见经传的 CodeRenderUnmi 和 WLW 、 FE editor 等等,用来用去发现有些功能确实强大,但是要想用着顺手就必须修改很多东西,而且一旦 WordPress 或者插件本身自己升级,那些修改过的东西就必须重新再设置一遍,相当麻烦;要不就是一些离线的编辑器,复制来粘贴去的也很费心。到现在,我依然觉得,WordPress 自带的编辑器才是最强大且实用的!

正所谓 「自此精修,渐进于无剑胜有剑之境」,抛开那些个浮夸的编辑器,回到 WordPress 自带的 TinyMCE 编辑器上来,要知道,WordPress 自身也在不断的强大,每一次升级对自带编辑器的改动都是很实用的,不仅将多媒体功能融合到了一起,而且给人的感觉是越来越干净利落,从此我们也可以看到官方对自带编辑器 TinyMCE 的重视程度。下面我将我自己对自带编辑器 TinyMCE 的修改方法贴出来,所有代码只需写到主题里的 functions.php 文件里,即使日后升级 WordPress 也不需要重复操作。

更改编辑器默认视图为 HTML

大家都知道,在后台新建文章后,编辑器就自动跳转到 「可视化」 视图,对于一些经常要插入代码或者 WEB 设计者们来说 (我就是^_^),可能更习惯使用 HTML 视图手动编辑。而且,像 CKEditor 在可视化视图下编辑本来没有<p> 或<div> 标签,但切换到 HTML 视图之后就会自动添加,当然这是 CKEditor 的自动设置无可厚非,但是在日后想要重新编辑一篇发表过的文章时就会头疼了,因为 CKEditor 会自作多情的生成很多冗杂或混乱的代码,保持代码的干净整洁非常不便 (当然你要想凑合着用也不会对实际显示效果有很大改变,但会对网页结构减分) 。

设置方法:将以下代码添加到主题的 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.= "<div >";

$content.= "<h4>WordPress 网站优化之家</h4>";

$content.= "这里的预定义内容在编辑器可见<a href='http://www.***.com'>WordPress 网站优化之家</a>";

$content.= "</div>";

}

return $content;

}

add_filter ('default_content', 'insertPreContent');

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

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

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

function insertFootNote($content) {

if(!is_feed() && !is_home()) {

$content.= "<div >";

$content.= "<h4>WordPress 网站优化之家</h4>";

$content.= "这里的预定义内容在编辑器可见<a href='http://www.***.com'>WordPress 网站优化之家</a>";

$content.= "</div>";

}

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) 。下面就把这些功能掉出来吧!效果图:

WordPress 自带 TinyMCE 编辑器隐藏按钮

调用方式:将以下代码添加到主题 functions.php 文件里即可:

function enable_more_buttons($buttons) {

$buttons[] = 'hr';

$buttons[] = 'fontselect';

$buttons[] = 'sup';

$buttons[]= 'del';

$buttons[] = 'fontselect';

$buttons[] = 'cleanup';

$buttons[] = 'styleselect';

// 更多按钮自行添加吧。

return $buttons;

}

add_filter("mce_buttons", "enable_more_buttons"); //默认将新添加的按钮追加在工具栏的第一行

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

//add_filter("mce_buttons_3", "enable_more_buttons"); //添加到工具栏的第三行

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

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');

< strong> 简单添加自定义按钮

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

WordPress 自带 TinyMCE 编辑器自定义按钮

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

QTags.addButton('QTags.addButton('hr', 'hr', "
<hr />
",''); //快捷输入一个 hr 横线,点一下即可

QTags.addButton('h1','h1', "
<h1>", "</h1>
"); //快捷输入 h1 标签

QTags.addButton('1', '【 php 】', "
【 php 】

【/php 】", "");//我就是将 SyntaxHighlighter Evolved 插件的简码集成到工具栏,这样就方便多了^_^,不过记得将 【】 换成 [] 。

QTags.addButton('【 css 】', '【 css 】', "
【 css 】

【/css 】", "");//当然你也可以集成其他代码高亮或插件的简码^_^

//QTags.addButton('my_id', 'my button', '
', '
');

//这儿共有四对引号,分别是按钮的 ID 、显示名、点一下输入内容、再点一下关闭内容 (此为空则一次输入全部内容),
表示换行。

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

add_action('admin_print_scripts', 'my_quicktags');

function my_quicktags() {

wp_enqueue_script(

'my_quicktags',

get_stylesheet_directory_uri().'/my-quicktags.js',

array('quicktags')

);

}

好了,再去 HTML 编辑器看看吧,是不是很方便呢?

你还有其他好的 WordPress 自带 TinyMCE 编辑器的使用技巧吗?欢迎留言交流!