You basically have two options, using PHP or Javascript.
With PHP you would use the wp_editor
function to output the textarea for you, and with Javascript you would convert the existing textarea with wp.editor.initialize
.
Note there are slightly different settings available for each approach.
PHP
$id = 'yith_vendor_biografia';
$content = esc_textarea( stripslashes( $vendor->biografia ) );
$name="yith_vendor_data[biografia]";
$settings = array('tinymce' => true, 'textarea_name' => $name);
wp_editor($content, $id, $settings);
The $settings
array can optionally be configured in more detail also:
$settings = array(
'wpautop' => true, // Whether to use wpautop for adding in paragraphs. Note that the paragraphs are added automatically when wpautop is false.
'media_buttons' => true, // Whether to display media insert/upload buttons
'textarea_name' => $name, // The name assigned to the generated textarea and passed parameter when the form is submitted.
'textarea_rows' => 10, // The number of rows to display for the textarea
'tabindex' => '', // The tabindex value used for the form field
'editor_css' => '', // Additional CSS styling applied for both visual and HTML editors buttons, needs to include <style> tags, can use "scoped"
'editor_class' => '', // Any extra CSS Classes to append to the Editor textarea
'teeny' => false, // Whether to output the minimal editor configuration used in PressThis
'dfw' => false, // Whether to replace the default fullscreen editor with DFW (needs specific DOM elements and CSS)
'tinymce' => true, // Load TinyMCE, can be used to pass settings directly to TinyMCE using an array
'quicktags' => true, // Load Quicktags, can be used to pass settings directly to Quicktags using an array. Set to false to remove your editor's Visual and Text tabs.
'drag_drop_upload' => false // Enable Drag & Drop Upload Support (since WordPress 3.9)
);
Javascript
wp.editor.initialize in the Codex
<script>settings = { tinymce: true, quicktags: true }
wp.editor.initialize('yith_vendor_biografia', settings);</script>
You can also configure any of javascript settings, here is a full list of those:
settings = {
tinymce: {
wpautop : true,
theme : 'modern',
skin : 'lightgray',
language : 'en',
formats : {
alignleft : [
{ selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: { textAlign: 'left' } },
{ selector: 'img,table,dl.wp-caption', classes: 'alignleft' }
],
aligncenter: [
{ selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: { textAlign: 'center' } },
{ selector: 'img,table,dl.wp-caption', classes: 'aligncenter' }
],
alignright : [
{ selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: { textAlign: 'right' } },
{ selector: 'img,table,dl.wp-caption', classes: 'alignright' }
],
strikethrough: { inline: 'del' }
},
relative_urls : false,
remove_script_host : false,
convert_urls : false,
browser_spellcheck : true,
fix_list_elements : true,
entities : '38,amp,60,lt,62,gt',
entity_encoding : 'raw',
keep_styles : false,
paste_webkit_styles : 'font-weight font-style color',
preview_styles : 'font-family font-size font-weight font-style text-decoration text-transform',
tabfocus_elements : ':prev,:next',
plugins : 'charmap,hr,media,paste,tabfocus,textcolor,fullscreen,wordpress,wpeditimage,wpgallery,wplink,wpdialogs,wpview',
resize : 'vertical',
menubar : false,
indent : false,
toolbar1 : 'bold,italic,strikethrough,bullist,numlist,blockquote,hr,alignleft,aligncenter,alignright,link,unlink,wp_more,spellchecker,fullscreen,wp_adv',
toolbar2 : 'formatselect,underline,alignjustify,forecolor,pastetext,removeformat,charmap,outdent,indent,undo,redo,wp_help',
toolbar3 : '',
toolbar4 : '',
body_class : 'id post-type-post post-status-publish post-format-standard',
wpeditimage_disable_captions: false,
wpeditimage_html5_captions : true
},
quicktags : true,
mediaButtons: true
}
Note also that if you are attempting to use these on the frontend of a site you will need to enqueue editor resources for that context with wp_enqueue_editor();
(and if you want Media buttons you will need to also do wp_enqueue_media();
)