Loading wp_editor via AJAX
I was loading the wp_editor thru AJAX, the editor shows up but the buttons for both Visual and Text Tab are missing. After some research I found an easy fix to this problem
The idea:
- Create a hidden div containing the wp_editor (place this code bellow the container where you are loading your ajax response)
- On AJAX success, get the contents of the hidden editor then append it to your AJAX response div container
- Reinitialize the editor: Remove the editor then add it back
Create a hidden div containing the wp_editor:
1 2 3 |
Server Side Structure:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | public static function cvf_td_veiw_frontend_message() { if(isset($_POST['cvf_action']) && $_POST['cvf_action'] == 'veiw_frontend_message' ) { $display .= ' <article> <div class = "form-group"> <label>' . __('Reply', 'my-text-domain') . ':</label><br /> <div class = "bg-primary hidden-reply-editor"></div> </div> <input type = "submit" value = "' . __('Send', 'my-text-domain') . '" class = "btn btn-primary reply_to_conversation" /> </article>'; echo $display; } exit(); } add_action('wp_ajax_cvf_td_veiw_frontend_message', 'cvf_td_veiw_frontend_message') ); add_action('wp_ajax_nopriv_cvf_td_veiw_frontend_message', 'cvf_td_veiw_frontend_message') ); |
AJAX Request Structure:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | var data = { 'action': 'cvf_td_veiw_frontend_message', 'cvf_action': 'veiw_frontend_message' }; $.post(global.ajax_url, data, function(response) { // After the response has been appended to the our front-end... if($(".cvf_td_conversation_messages").html(response)){ // Get the contents of the hidden wp_editor reply_editor = $('.hidden-editor-container').contents(); // Append the contents of the hidden wp_editor to div container $('.hidden-reply-editor').append( reply_editor ); // Reinitialize the editor: Remove the editor then add it back tinymce.execCommand( 'mceRemoveEditor', false, 'tdmessagereply' ); tinymce.execCommand( 'mceAddEditor', false, 'tdmessagereply' ); } }); |
Hope this tutorial makes a better day for someone 🙂
Do you need help with a project? or have a new project in mind that you need help with?
Contact Me
