我注意到我的编辑帖子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部分出现任何阻塞,但我对此不能绝对肯定。
最合适的回答,由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/