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

#wordpress

#wordpress

Вопрос:

Я создал метабокс WordPress пользовательского типа post ( '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') amp;amp; 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 amp;amp; '' == $meta_value ){
        add_post_meta( $post->ID, $meta_key, $new_meta_value, true); 
        echo 'add';
    }

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

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

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

Ответ №1:

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

1.

Добавьте скрытый тип ввода и обновите его значение с помощью javascript, когда содержимое редактируемого 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">
  

Комментарии:

1. textarea также не отображает HTML. Я пробую первый вариант, спасибо!

Ответ №2:

Создайте 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

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

Комментарии:

1. textarea Имеет ли он скрытый тип? Похоже, это не работает

2. нет, вам нужно изменить его на <input type="hidden"/> я только что установил это в качестве примера

3. это основы HTML

4. да, просто хотел использовать jQuery, и я выполняю передачу данных (между div и входом) одним нажатием кнопки #publish