Naren,
The actual set-up for the classic/TinyMCE editor is relatively straightforward, I have updated your wordpress_register_fields()
function with the necessary lines. For wp_editor()
to work you need to get the content if there’s any saved, id the field and then provide settings arguments. (https://developer.wordpress.org/reference/functions/wp_editor/)
function wordpress_register_fields() {
global $post;
// Nonce field to validate form request came from current site
wp_nonce_field( basename( __FILE__ ), 'layout' );
// Output the field
echo '<div class="create_custom_layout"><div class="row">';
echo '<div class="col-md-6">';
echo '<h4>Description</h4>';
//We first get the post_meta from the DB if there's any there.
$description = get_post_meta( $post->ID, 'Description', true );
//Second ID the field.
$description_field = 'Description';
//Provide the settings arguments for this specific editor in an array
$description_args = array( 'media_buttons' => false, 'textarea_rows' => 12, 'textarea_name' => 'description',
'editor_class' => 'description-editor widefat', 'wpautop' => true );
wp_editor( $description, $description_field, $description_args );
echo '</div>';
echo '<div class="col-md-6">
<h4>Banner image</h4>
<input type="button" id="meta-image-button" class="button" value="Choose or Upload an Image" style="padding: 8px 10px; height: auto; line-height: normal;"/>
<input type="hidden" name="client_image" id="meta-image" class="meta_image" value="'.get_post_meta(get_the_ID(), 'client_image', true ).'" /><br />
<img style="width: 100px;height: 100px;object-fit: cover;" id="meta-image-preview" src="'.get_post_meta(get_the_ID(), 'client_image', true ).'" />
</div>
</div>
</div>
<style>
.create_custom_layout .row{display: flex;flex-wrap: wrap;}
.create_custom_layout .col-md-6 {
flex: 0 0 auto;
width: 50%;
}
</style>
<script>
jQuery("#meta-image-button").click(function() {
var send_attachment_bkp = wp.media.editor.send.attachment;
wp.media.editor.send.attachment = function(props, attachment) {
jQuery("#meta-image").val(attachment.url);
jQuery("#meta-image-preview").attr("src",attachment.url);
wp.media.editor.send.attachment = send_attachment_bkp;
}
wp.media.editor.open();
return false;
});
</script>';
}
For something this straightforward I usually prefer not to use plugins and bloat the site’s codebase when the alternative is literally just leveraging what WordPress already has and implementing it with an additional 3-5 lines of code.
My only suggestions is to perhaps come up with a more explicitly identifying name than description
as that’s pretty generic.