WordPress metabox - div, редактируемый как ввод

Question

Я создал метабокс WordPress с пользовательским типом записи ('inventaire').Я хотел бы создать inv_content таксономию, которая содержится в редактируемом элементе div (потому что он предназначен для создания таблиц и их мгновенного редактирования).

Однако у меня сложилось впечатление, что 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

Создать div с атрибутом contenteditable="true" и в 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

Изменить текстовую область для ввода скрытого типа:

Answer 2

Два варианта:

1.

Добавьте скрытый тип ввода и обновите его значение с помощью javascript, когда contenteditable div изменилось.Установите его значение как contentEditable content.

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">