最新消息:Excel无乱码转CSV,由于工作原因很少更新博客和回复大家的评论,非常抱歉。

WordPress自带TinyMCE编辑器使用技巧大全

自从用上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 class='wpohome'>";
$content.= "<h4>WordPress网站优化之家</h4>";
$content.= "这里的预定义内容在编辑器可见<a href='http://www.hicoogle.com'>WordPress网站优化之家</a>";
$content.= "</div>";
}
return $content;
}
add_filter ('default_content', 'insertPreContent');

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

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

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

function insertFootNote($content) {
if(!is_feed() && !is_home()) {
$content.= "<div class='wpohome'>";
$content.= "<h4>WordPress网站优化之家</h4>";
$content.= "这里的预定义内容在编辑器可见<a href='http://www.hicoogle.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)。下面就把这 些功能掉出来吧!效果图:

调用方式:将以下代码添加到主题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');

简单添加自定义按钮

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

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

QTags.addButton( 'QTags.addButton( 'hr', 'hr', "\n<hr />\n", '' ); //快捷输入一个hr横线,点一下即可
QTags.addButton( 'h1', 'h1', "\n<h1>", "</h1>\n" ); //快捷输入h1标签
QTags.addButton( '1', '【php】', "\n【php】\n\n【/php】", "" );//我就是将SyntaxHighlighter Evolved插件的简码集成到工具栏,这样就方便多了^_^,不过记得将【】换成[]。
QTags.addButton( '【css】', '【css】', "\n【css】\n\n【/css】", "" );//当然你也可以集成其他代码高亮或插件的简码^_^
//QTags.addButton( 'my_id', 'my button', '\n', '\n' );
//这儿共有四对引号,分别是按钮的ID、显示名、点一下输入内容、再点一下关闭内容(此为空则一次输入全部内容),\n表示换行。

步骤二:把刚才写好的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编辑器的使用技巧吗?欢迎留言交流!

来源:http://www.wpohome.com/wonderful-recommendation/2012/0208/372.html

转载请注明:嗨酷哥,有你更酷! » WordPress自带TinyMCE编辑器使用技巧大全

与本文相关文章

发表我的评论

取消评论
表情 插代码

Hi,您需要填写昵称和邮箱!

  • 必填项
  • 必填项

网友评论1

  1. 看来需要学习的还有很多啊。

    沁园春2012-07-05 12:27 回复