使用自定义POST WP编辑器书写时自动调整大小

时间:2017-10-26 作者:Bachir Messaouri

我注意到我的编辑帖子WP编辑器在写作时会自动展开。然而,我用于其他自定义帖子类型的WP编辑器实例却没有。

我仔细研究了一下,发现在内置编辑帖子中包含textarea的iframe有一个具有“wp autoresize”类的主体。我的自定义贴子中没有。我想添加这个类就是允许自动调整大小功能所需的全部。至少值得一试。

因此,我尝试将此类添加到我的CPT插件的iframe主体中,如下所示:

add_filter( \'tiny_mce_before_init\', \'wpse_235194_tiny_mce_classes\' );
function wpse_235194_tiny_mce_classes( $init_array ){
  global $post;
    $init_array[\'body_class\'] .= \' \' . join( \' \', \'wp-autoresize\' );
  return $init_array;
}
但课堂没有出现在那里。

我也尝试过这一点(然后愿意专门针对每个CP iframe id):

$("iframe#_xxx_textarea").contents().find("body").addClass("wp-autoresize");
也没有成功。

无论我试图向iframe主体添加什么类,都是失败的。

因此,我尝试绕过body类的方法,以另一种方式为TinyCME添加自动调整大小功能:

function init_tinymce_autoresize($initArray){
   $initArray[\'plugins\'] = "autoresize";
   return $initArray;
}
add_filter(\'tiny_mce_before_init\', \'init_tinymce_autoresize\');
没有。

然后尝试添加更复杂的手工插件,如下所述:

TinyMCE Autoresize

但什么也没有发生。

什么都没有,我的意思是,当我的文本随着键入而变大时,文本区域保持其原始高度,我必须滚动才能看到整个内容。

有些我被困住了,因为我相信我已经尝试了前3个小时找到的所有标准解决方案。现在我一直在寻找我已经尝试过的同样的解决方案。

那么,如何在应用于自定义帖子的自定义TinyMCE编辑器上实现自动调整大小呢?

谢谢

EDIT: 我被要求展示我注册CPT的方式:

    function xxx_custom_type_init()
    {
        register_post_type(\'xxx\', array(
          \'labels\' => array(
          \'name\' => \'xxx\',
          \'singular_label\' => \'xxx\',
          \'add_new\' => \'Ajouter\',
          \'add_new_item\' => \'Ajouter un élément\',
          \'new_item\' => \'Nouvel élément\',
          \'view_item\' => \'Afficher l\\\'élément\',
          \'edit_item\' => \'xxx\',
          \'not_found\' => \'Auncun élément trouvé\',
          \'not_found_in_trash\' => \'Auncun élément dans la corbeille\'),
          \'public\' => true,
          \'show_ui\' => true,
          \'capability_type\' => \'post\',
          \'hierarchical\' => false,
          \'supports\' => array(\'\')
        ));
        register_taxonomy_for_object_type( \'category\', \'xxx\' );
    }
    add_action(\'init\', \'xxx_custom_type_init\');

    function xxx_custom_type_messages( $messages ) 
    {
        global $post, $post_ID;
        $messages[\'xxx\'] = array(
            1 => sprintf(__(\'xxx updated. <a href="%s">See xxx</a>\',\'your_text_domain\'),esc_url(get_permalink($post_ID))),
            4 => __(\'xxx updated.\', \'your_text_domain\'),
            6 => sprintf(__(\'xxx published. <a href="%s">See xxx</a>\',\'your_text_domain\'),esc_url(get_permalink($post_ID))),
            7 => __(\'xxx saved.\',\'your_text_domain\'),
            9 => sprintf(__(\'Elément prévu pour: <strong>%1$s</strong>. <a target="_blank" href="%2$s">Prévisualiser l\\\'élément</a>\',\'your_text_domain\'),
            date_i18n(__(\'M j, Y @ G:i\'),strtotime($post->post_date)),esc_url(get_permalink($post_ID))),
            10 => sprintf(__(\'Brouillon mis à jour. <a target="_blank" href="%s">Prévisualiser l\\\'élément</a>\',\'your_text_domain\'),esc_url(add_query_arg(\'preview\',\'true\',get_permalink($post_ID)))),
        );
        return $messages;
    }
    add_filter( \'post_updated_messages\', \'xxx_custom_type_messages\' );
下面是我如何将编辑器添加到我的CP管理页面:

<?php

add_action( \'add_meta_boxes\', \'xxx_textarea_add_fields_metabox\');
function xxx_textarea_add_fields_metabox() 
{
    add_meta_box(
        \'xxx_textarea_metabox\', 
        \'Intro\', 
        \'xxx_textarea_show_fields_metabox\', 
        \'xxx\', 
        \'side\', 
        \'default\'
    );
}

function xxx_textarea_show_fields_metabox()
{   
    global $post; 
    $content = get_post_meta($post->ID, \'_xxx_textarea\', true); 

    ?>  

    <style> 

        iframe#_xxx_textarea_ifr
            {width:100%;height:auto !important;display:block;}
        iframe#_xxx_textarea_ifr html
            {overflow:hidden;display: block;}
        iframe#_xxx_textarea_ifr body
            {overflow:hidden;display: block;}
        #_xxx_textarea
            {height:auto;overflow-y: hidden;min-height: 35px;overflow-x: hidden;overflow-y: auto;}

    </style>    

    <?php   

    $args = array(
        \'description_name\' => \'_xxx_textarea\',
         \'teeny\' => true,
         \'quicktags\' => false,
         \'media_buttons\' => false,
         \'tinymce\' => array(
             \'toolbar1\'=> \'bold,italic,underline,link,unlink,forecolor\',
             \'toolbar2\' => \'\',
             \'toolbar3\' => \'\'
         )
    );
    wp_editor( $content, \'_xxx_textarea\', $args );
    wp_nonce_field(plugin_basename(__FILE__), \'xxx_textarea_noncename\');    
};      

add_action(\'save_post\', \'xxx_textarea_save_fields_metabox\', 1, 2);
function xxx_textarea_save_fields_metabox($post_id, $post) 
{
    global $post_id;

    if ( !wp_verify_nonce( $_POST[\'xxx_textarea_noncename\'], plugin_basename(__FILE__) )){return $post->ID;}  
    if ( !current_user_can( \'edit_post\', $post->ID ))                                      {return $post->ID;}   
    if( $post->post_type == \'revision\' )                                                 {return;$post->ID;}

    if($_POST[\'_xxx_textarea\']) {$xxx_content = $_POST[\'_xxx_textarea\'];}
    else{$xxx_content = \'\';};

    if(get_post_meta($post_id, \'_xxx_textarea\', FALSE)){update_post_meta($post_id, \'_xxx_textarea\', $xxx_content);} 
    else{ add_post_meta($post_id, \'_xxx_textarea\', $xxx_content);};             
}
我希望这有帮助。

仅供参考,我将我的CPT的iframe和body的样式与我在标准编辑帖子中找到的完全相同。

我在iframe的高度添加了“!important”标志,因为在WP文件的某个地方,它似乎被设置为400px。所以,这样,它显然被覆盖了。

因此,我不希望CSS部分出现任何阻塞,但我对此不能绝对肯定。

2 个回复
最合适的回答,由SO网友:Kumar 整理而成

我终于摆脱了这一切。

您需要修改传递给wp\\u编辑器函数的tinymce参数。WordPress有一个论点wp_autoresize_on 允许自动调整编辑器的大小。

因此,与其这样:

\'tinymce\' => array(
         \'toolbar1\'=> \'bold,italic,underline,link,unlink,forecolor\',
         \'toolbar2\' => \'\',
         \'toolbar3\' => \'\'
     )
您需要使用此选项:

\'tinymce\' => array(
        \'autoresize_min_height\' => 100,
        \'wp_autoresize_on\'      => true,
        \'plugins\'               => \'wpautoresize\',
        \'toolbar1\'              => \'bold,italic,underline,link,unlink,forecolor\',
        \'toolbar2\'              => \'\',
    ),
这里还有两个附加参数,autoresize_min_height, 您可以将其设置为所需高度,第二个是\'wp_autoresize_on\' => true,.除此之外,您还需要传递额外的参数来加载tinymce插件,以便自动调整大小,即\'plugins\' => \'wpautoresize\' 而且自动调整大小的功能完美无瑕。

通过这些更改,我建议您在代码中添加一些其他检查。功能类似:

function xxx_textarea_save_fields_metabox($post_id, $post) {
  global $post_id;

  if ( !wp_verify_nonce( $_POST[\'xxx_textarea_noncename\'], plugin_basename(__FILE__) )){return $post->ID;}  
  if ( !current_user_can( \'edit_post\', $post->ID ))                                      {return $post->ID;}   
  if( $post->post_type == \'revision\' )                                                 {return;$post->ID;}

  if($_POST[\'_xxx_textarea\']) {$xxx_content = $_POST[\'_xxx_textarea\'];}
  else{$xxx_content = \'\';};

  if(get_post_meta($post_id, \'_xxx_textarea\', FALSE))
  {update_post_meta($post_id, \'_xxx_textarea\', $xxx_content);} 
  else{ add_post_meta($post_id, \'_xxx_textarea\', $xxx_content);};             

  }
请确保添加空$\\u帖子的检查,否则您将在帖子编辑屏幕上收到通知。我已经做了更改并格式化了代码(您应该这样做),下面是添加metabox的全部代码。

add_action( \'add_meta_boxes\', \'xxx_textarea_add_fields_metabox\' );
function xxx_textarea_add_fields_metabox() {
    add_meta_box(
        \'xxx_textarea_metabox\',
        \'Intro\',
        \'xxx_textarea_show_fields_metabox\',
        \'new_xxx\',
        \'side\',
        \'default\'
    );
}

function xxx_textarea_show_fields_metabox() {
    global $post;
    $content = get_post_meta( $post->ID, \'_xxx_textarea\', true );
    //Loads the editor to allow adding fresh content if there is no content already
    $content = empty( $content ) ? \'\' : $content;

    $args = array(
        \'description_name\' => \'xxx_textarea\',
        \'teeny\'            => true,
        \'quicktags\'        => false,
        \'media_buttons\'    => false,
        \'tinymce\'          => array(
            \'autoresize_min_height\' => 100,
            \'wp_autoresize_on\'      => true,
            \'plugins\'               => \'wpautoresize\',
            \'toolbar1\'              => \'bold,italic,underline,link,unlink,forecolor\',
            \'toolbar2\'              => \'\',
        ),
    );
    wp_editor( $content, \'_xxx_textarea\', $args );
    wp_nonce_field( plugin_basename( __FILE__ ), \'xxx_textarea_noncename\' );
}

add_action( \'save_post\', \'xxx_textarea_save_fields_metabox\', 1, 2 );
function xxx_textarea_save_fields_metabox( $post_id, $post ) {
    global $post_id;

    //Avoids notice and warnings
    if( empty( $_POST ) ) {
        return $post->ID;
    }
    if ( !empty( $_POST[\'xxx_textarea_noncename\'] ) && ! wp_verify_nonce( $_POST[\'xxx_textarea_noncename\'], plugin_basename( __FILE__ ) ) ) {
        return $post->ID;
    }
    if ( ! current_user_can( \'edit_post\', $post->ID ) ) {
        return $post->ID;
    }
    if ( $post->post_type == \'revision\' ) {
        return;
        $post->ID;
    }

    if ( $_POST[\'_xxx_textarea\'] ) {
        $xxx_content = $_POST[\'_xxx_textarea\'];
    } else {
        $xxx_content = \'\';
    };

    if ( get_post_meta( $post_id, \'_xxx_textarea\', false ) ) {
        update_post_meta( $post_id, \'_xxx_textarea\', $xxx_content );
    } else {
        add_post_meta( $post_id, \'_xxx_textarea\', $xxx_content );
    };
}
这应该可以做到。对应岗位:http://codechutney.com/auto-resize-wp-editor-custom-instance/

SO网友:FroboZ

我意识到这是几年后的事了,我不知道这个功能当时是否可用,但现在它就像传递wp\\u autoresize\\u一样简单,就像传递给安装配置一样真实

In javascript

wp.editor.initialize(\'case-\'+caseid+\'-post_content\', {\'tinymce\': {
                    \'wp_autoresize_on\' : true
                }, \'quicktags\': true, \'mediaButtons\': true});

结束

相关推荐

第一次提交时WP-EDITOR为空

我在一个简单的插件中使用wp编辑器,但我遇到了一个问题,第一次点击提交按钮时,数据库中的内容是空白的。<?php $editor_id = \'mycontent\'; wp_editor($content, $editor_id ); ?> 因此,我尝试使用以下内容提醒内容:if (j(\".wp-content-wrap\").hasClass(\"tmce-active\")){ alert(