WordPress 3.3版本新增了一个wp editor class (/wp-includes/class-wp-editor.php)。这个class使定制WordPress默认编辑器TinyMCE变的方便简单。特别是新增的函数wp_editor,用这个函数就能在WordPress任何地方将一个textarea渲染成TinyMCE编辑器。

函数原型和参数

<?php wp_editor( $content, $editor_id, $settings = array() ); ?>
  • $content – textarea中的内容
  • $editor_id – 编辑器的HTML ID,只能包含小写字母
  • $settings – 设置选项,是一个数组,可以设置的参数包括:
    • wpautop – 是否开启wpautop,默认为true
    • media_buttons – 是否显示上传多媒体的按钮,默认true
    • textarea_name – textarea的name属性,默认与$editor_id相同
    • textarea_rows – textarea的rows属性,默认是get_option('default_post_edit_rows', 10),这一项在后台设置
    • tabindex – tabindex数值,tabindex规定用户用键盘的tab键切换表单元素时的顺序。
    • editor_css – 给编辑器添加css样式,适用于visual和html模式,必须包含<style>标签
    • teeny – 是否开启精简模式,这种模式下只加载基本插件(不加载任何外部TinyMCE插件),加载的插件包括inlinepopups、fullscreen、wordpress、wplink和wpdialogs,默认为false
    • tinymce – 用数组形式直接向tinyMCE传递参数
    • quicktags – 加载Quicktags,即HTML模式下的那些按钮,可以用数组形式直接向Quicktags传递参数。
    • dfw – 是否用DFW替换默认的全屏编辑器(需要特殊的DOM元素和css支持),开启该模式时,加载的全屏插件是wpfullscreen,默认为false。

代码实例

1. 启用teeny模式

<?php wp_editor( '', 'myeditor', array(
            'teeny' => true )
	);
?>

效果如下图所示

开启teeny模式

2. 关闭teeny模式,关闭media_buttons

<?php wp_editor( '', 'myeditor', array(
	'media_buttons' => false )
    );
?>

效果如下图所示

关闭media_buttons

3. 去掉WordPress自定义按钮,更换皮肤为default,默认是wp_theme

<?php wp_editor( '', 'myeditor', array(
		'media_buttons' => false,
		'tinymce' => array( 'plugins' => '','skin' => 'default') )
	  );
?>

效果如下

更换皮肤

可选的皮肤:default、wp_theme、o2k7和highcontrast

4.控制每行显示哪些按钮,显示部分WordPress隐藏的按钮

<?php wp_editor( '', 'myeditor', array(
			'media_buttons' => false,
			'tinymce' => array( 'plugins' => '',
						'skin' => 'o2k7',
						'theme_advanced_buttons1' => 'undo,redo,|,bold,italic,underline,strikethrough|,justifyleft,justifycenter,justifyright,justifyfull,|,forecolor,backcolor',
						'theme_advanced_buttons2' => 'cut,copy,paste,|,bullist,numlist,blockquote,|,link,unlink,anchor,image,|,sub,sup,hr'
					 )
			)
	  );
?>

效果如下

控制每行显示哪些按钮

使用tinymce参数向TinyMCE传参时,使用TinyMCE的格式,具体参考这里

12条留言

  1. 使用这个函数怎么实现前台发布呢?

    因为我觉得wordpress.com的前台发布页面做的太好了。

    1. 不好意思,这个我没研究过,如果你有好的方法能分享给我吗?
      wp_editor可以在前台显示,只要不涉及上传图片等需要权限的操作,直接调用这个函数就行。
      提交的内容用wp_insert_post保存一下。

      其实visual composer也有前台编辑功能,感觉还行。wordpress.com我很久没用了。

  2. 请问这个输出函数是什么呢?现在在后台写好内容后。。。没发输出。。

    1. 这个函数就是输出编辑文中用的那个所见即所得编辑器,如果没输出成功,用firebug看下是否有js错误,或者查看error log是否有php错误。

    2. PS.如果你想实现后台选项功能,不用自己写的,有很多现成的framework可用,神马编辑器,文件上传各种能实现。
      比如这个options framework http://wordpress.org/plugins/options-framework/
      另外,插件Advanced Custom Fields也可以创建各类meta box,这个强烈推荐使用。它的收费插件可以实现主题选项功能。

      1. 我其实就是想在后台集成一些功能,那个函数能显示。。。但是保存完后,里面的字就没了。现在我去试试options framework
        谢谢啦

        1. 保存后数据没了,我想这不是那个函数的问题,编辑器的内容不过是这个函数的一个参数罢了,怎么保存是你自己的php程序决定的,可能是你的保存和显示代码有点问题。用framework,这个过程会自动完成。

  3. 这种 s3.envato.com/files/1546243/screenshots/06_options.jpg

  4. 楼主的上传多媒体功能正常么?为啥我的上传多媒体功能能上传却没法插入到文章中?
    还有就是换行问题,我在后台面板调用wp_editor存入数据后,没有调用系统没调用nl2br无法正常换行,请教楼主该怎么办?

    1. 你是在前台调用wp_editor还是在后台?不是在编辑文章界面吗?
      我在前台用过,如果用户有上传文件的权限,多媒体功能可以正常使用
      换行我没遇到过问题,wp_editor的换行是靠wp_autop功能,不知道你具体在哪里使用的wp_editor,不知道具体情况很难说是哪里的问题

      1. 我找到问题了,是我在之前调用一个上传图片的代码时注册了脚本事件导致覆盖了wp_editor的功能,删掉就好了。但是又遇到一个问题,就是如何在后台开发中上传图片。就是这种效果,楼主有没有什么好的建议?

评论功能已关闭