I have a texarea in a page that works like a charm, but I would like to convert the area to a html rich wp_editor. Could anyone tell me how to convert this textarea to a wp_editor field?? Thanks

 <textarea id="yith_vendor_biografia" name="yith_vendor_data[biografia]" rows="10" cols="50" class="large-text" placeholder="Write your mission statement here"><?php echo esc_textarea( stripslashes( $vendor->biografia ) ) ?></textarea>

I have a texarea in a page that works like a charm, but I would like to convert the area to a html rich wp_editor. Could anyone tell me how to convert this textarea to a wp_editor field?? Thanks

 <textarea id="yith_vendor_biografia" name="yith_vendor_data[biografia]" rows="10" cols="50" class="large-text" placeholder="Write your mission statement here"><?php echo esc_textarea( stripslashes( $vendor->biografia ) ) ?></textarea>

• visual-editor
• wp-editor
• wysiwyg

1 Answer 1

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

wp_editor function in Codex

$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

}

Source

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();)