-
-
Save retgef/1207830 to your computer and use it in GitHub Desktop.
<?php | |
define('WYSIWYG_META_BOX_ID', 'my-editor'); | |
define('WYSIWYG_EDITOR_ID', 'myeditor'); //Important for CSS that this is different | |
define('WYSIWYG_META_KEY', 'extra-content'); | |
add_action('admin_init', 'wysiwyg_register_meta_box'); | |
function wysiwyg_register_meta_box(){ | |
add_meta_box(WYSIWYG_META_BOX_ID, __('WYSIWYG Meta Box', 'wysiwyg'), 'wysiwyg_render_meta_box', 'post'); | |
} | |
function wysiwyg_render_meta_box(){ | |
global $post; | |
$meta_box_id = WYSIWYG_META_BOX_ID; | |
$editor_id = WYSIWYG_EDITOR_ID; | |
//Add CSS & jQuery goodness to make this work like the original WYSIWYG | |
echo " | |
<style type='text/css'> | |
#$meta_box_id #edButtonHTML, #$meta_box_id #edButtonPreview {background-color: #F1F1F1; border-color: #DFDFDF #DFDFDF #CCC; color: #999;} | |
#$editor_id{width:100%;} | |
#$meta_box_id #editorcontainer{background:#fff !important;} | |
#$meta_box_id #$editor_id_fullscreen{display:none;} | |
</style> | |
<script type='text/javascript'> | |
jQuery(function($){ | |
$('#$meta_box_id #editor-toolbar > a').click(function(){ | |
$('#$meta_box_id #editor-toolbar > a').removeClass('active'); | |
$(this).addClass('active'); | |
}); | |
if($('#$meta_box_id #edButtonPreview').hasClass('active')){ | |
$('#$meta_box_id #ed_toolbar').hide(); | |
} | |
$('#$meta_box_id #edButtonPreview').click(function(){ | |
$('#$meta_box_id #ed_toolbar').hide(); | |
}); | |
$('#$meta_box_id #edButtonHTML').click(function(){ | |
$('#$meta_box_id #ed_toolbar').show(); | |
}); | |
//Tell the uploader to insert content into the correct WYSIWYG editor | |
$('#media-buttons a').bind('click', function(){ | |
var customEditor = $(this).parents('#$meta_box_id'); | |
if(customEditor.length > 0){ | |
edCanvas = document.getElementById('$editor_id'); | |
} | |
else{ | |
edCanvas = document.getElementById('content'); | |
} | |
}); | |
}); | |
</script> | |
"; | |
//Create The Editor | |
$content = get_post_meta($post->ID, WYSIWYG_META_KEY, true); | |
the_editor($content, $editor_id); | |
//Clear The Room! | |
echo "<div style='clear:both; display:block;'></div>"; | |
} | |
add_action('save_post', 'wysiwyg_save_meta'); | |
function wysiwyg_save_meta(){ | |
$editor_id = WYSIWYG_EDITOR_ID; | |
$meta_key = WYSIWYG_META_KEY; | |
if(isset($_REQUEST[$editor_id])) | |
update_post_meta($_REQUEST['post_ID'], WYSIWYG_META_KEY, $_REQUEST[$editor_id]); | |
} |
Hi, the function you use "the_editor" is deprecated since WP version 3.3.
In order to render a WYSIWYG editor, only make a call to the php function "wp_editor()"
You can take a look in the codex here : http://codex.wordpress.org/Function_Reference/wp_editor
Dang that's a convenient bit of code.
Awesome..., thank you so much..
Holy crap it worked.
Thanks !!!!
Hi Inspector,
I noticed there's no nonce in your metabox, as is recommended.
Does wp_editor automatically check the post nonce when saving? I can't see that it's adding its own either.
How to display metabox content on post?
thank you.!
How to automatically create paragraphs?
it works!
the_editor
is deprecated; use wp_editor instead!
Thank you so much! One question/comment: according to the docs (scroll to the bottom under "Notes"), content saved from the editor should use wp_kses_post - making line 74-75:
if(isset($_REQUEST[$editor_id]))
update_post_meta($_REQUEST['post_ID'], WYSIWYG_META_KEY, wp_kses_post($_REQUEST[$editor_id]));
Is that necessary in this case?
Do you really need part after this:
//Add CSS & jQuery goodness to make this work like the original WYSIWYG
Isn't this enough: ?
$content = get_post_meta( $post->ID, WYSIWYG_META_KEY, true );
wp_editor( $content, $editor_id);
Hi
Thank you so much.
pleas how can i display the content? i use this WYSIWYG as a 2 Text.
Thank you
Hassan
As of now this is enough to add a WYSIWYG editor as a meta box and save its value.
// add the meta box
add_action('add_meta_boxes', function () {
add_meta_box('additional_meta', 'Product Info', 'additional_meta_cb', ['post'], 'normal');
});
// The function to show the editor and its content if available.
function addition_meta_cb($post) {
// get the content
$text = get_post_meta($post, 'additional_meta', true);
// add wp_editor the the screen
wp_editor(htmlspecialchars($text), additional_meta_ID', $settings = array('textarea_name' => 'additional_meta', 'media_buttons' => true, 'tinymce' => true, 'teeny' => false, 'wpautop' => true));
}
// save the metabox
add_action('save_post', function ($post_id) {
if (!empty($_POST['additional_meta'])) {
$data = sanitize_text_field($_POST['additional_meta']);
update_post_meta($post_id, 'additional_meta', $data);
}
});
Thank you.
Thanks, very handy and simple.