当前位置:首页>WordPress建站>WordPress开发>使用wp_editor函数快速集成TinyMCE编辑器

使用wp_editor函数快速集成TinyMCE编辑器

WordPress 主题 CoreNext

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

wp_editor 函数参数

<?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。

wp_editor 使用示例

1、启用精简模式

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

效果如图:

wp_edito-teeny-wpdaxue_com

2、关闭精简模式和上传按钮

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

效果如图:

wp_edito-1-wpdaxue_com

3、更换皮肤为default,默认是wp_theme

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

效果如图:

wp_edito-2-wpdaxue_com

可选的皮肤: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'
                     )
            )
      );
?>

效果如图:

wp_edito-3-wpdaxue_com

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

参考资料:http://www.solagirl.net/wp-editor-tutorial.html

推荐阅读:http://soderlind.no/front-end-editor-in-wordpress-3-3/(更多示例)

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
欢迎关注WordPress大学公众号 WPDAXUE
WordPress开发

如何在插件菜单中使用WordPress默认的菜单图标

2013-7-4 10:21:00

WordPress开发

删除/添加/调用WordPress用户个人资料的联系信息

2013-7-27 9:36:51

23 条回复 A文章作者 M管理员
  1. Hiens

    还有一个问题想请教一下,怎么获取在编辑器里写的内容?

  2. Hiens

    为什么用以上的方法调用的编辑器,按钮都不显示,一个按钮都没有。。。百度也找不到是什么原因。

    • 倡萌

      自己使用浏览器的调试模式(F12)看看,是不是哪些js文件没有正常加载等等

    • Hiens

      根据你的提示,找到了原因。我查看了一下header.php 和 footer.php文件,发现footer.php文件里少了一个 wp_footer(); 函数,导致了部分js没加载。谢谢。

  3. 设计窝

    wp_editor 默认不显示内容,点击 “文本、可视化” 切换后,可视化状态下才正常显示内容,这种情况有解决方法吗?或者说原因应该是出在哪儿?

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索