Question

我创建了一个自定义帖子类型（'inventaire'）的WordPress metabox。我想创建一个包含在可编辑div中的inv_content分类法（因为它是创建表格并立即对其进行编辑）。

但是，我的印象是WordPress不接受div可编辑的条目，因为在我的帖子保存功能中，$_POST['inv_content']不存在。

是问题吗？我尝试使用<input type='text'>，但是它不呈现HTML内容（对于表格内容，这是不实际的）。我该怎么办？

function inventaire_add_metabox_table() {
    add_meta_box(
        'metabox_table',        
        'Contenu',                
        'show_metabox_table',   
        'inventaire',           
        'normal',              
        'high'                  
    );
}

add_action('add_meta_boxes', 'inventaire_add_metabox_table');

function show_metabox_table() {
    global $post;
    wp_nonce_field( 'inventaire_add_metabox_table_nonce', 'inventaire_add_table_nonce' ); 

    $table = get_post_meta($post->ID, 'inv_content', true);

?>
    <div id="inv-div-content" class="div_content inside" name="inv_content" contenteditable="true">
<?php 
}

function inventaire_save_metabox_table( ) {
    global $post;

    if( !isset( $_POST['inventaire_add_table_nonce'] ) || !wp_verify_nonce( $_POST['inventaire_add_table_nonce'],'inventaire_add_metabox_table_nonce') ) 
        return;

        if ( !current_user_can( 'edit_post', $post->ID )) 
        return;

    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)
        return;

    $meta_key = 'inv_content';
    $new_meta_value = ( isset( $_POST[$meta_key] ) ?  $_POST[$meta_key] : '' );
    $meta_value = get_post_meta( $post->ID, $meta_key, true);

    var_dump( $_POST[$meta_key]);

    if ( $new_meta_value && '' == $meta_value ){
        add_post_meta( $post->ID, $meta_key, $new_meta_value, true); 
        echo 'add';
    }

    elseif ( $new_meta_value && $new_meta_value != $meta_value ){
        update_post_meta( $post->ID, $meta_key, $new_meta_value );
        echo 'update';
    }

    elseif ( '' == $new_meta_value && $meta_value ){
        delete_post_meta( $post->ID, $meta_key, $meta_value );
        echo 'delete';
    }

}
add_action( 'save_post', 'inventaire_save_metabox_table' );

Answer 1

两个选项：

1。

添加一个隐藏的输入类型，并在contenteditable div更改时使用javascript更新其值。将其值设置为contentEditable内容。

2

替换

<div id="inv-div-content" class="div_content inside" name="inv_content" contenteditable="true">

作者

<textarea id="inv-div-content" class="div_content inside" name="inv_content">

Answer 2

使用contenteditable="true"属性创建div，然后在javascript中为此元素添加事件监听器：

window.onload = function(){
document.getElementById("inv-div-content").addEventListener("input", function(e) {
   var inputContent = e.target.innerHTML; //do whatever you want with value
    document.getElementById('actual-content-to-send').value = inputContent;
}, false);
}

#inv-div-content{
width: 60%;
height: 50px;
display: block;
}

 <div contenteditable="true" id="inv-div-content" >Insert your text content</div> <br>
  <textarea cols="40" rows="6" id="actual-content-to-send" name="user_typed_content" disabled></textarea>  <br>
note: change this text area to input element of hidden type, I have set to text to see it working

详细了解contenteditable：

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content

有关input事件的更多信息：

https://developer.mozilla.org/en-US/docs/Web/Reference/Events/input

将文本区域更改为隐藏类型的输入：

WordPress metabox-div可作为输入进行编辑

2 个答案: