How do I add a Visual Editor to a Textarea?

Quform WordPress v2 DocumentationFAQElementsHow do I add a Visual Editor to a Textarea?

Go to the Textarea element settings.

Go to the Textarea element settings

Then go to the Styles tab.

Go to the Textarea styles tab

Then turn on the option Enable editor.

Turn on the Enable editor option

Show legacy instructions

Add the following code to your site (see Adding custom code for help):

PHP 5.3+
PHP 5.2

add_action('quform_pre_display_1', function (Quform_Form $form) {    $textarea = $form->getElement('quform_1_3'); 
    if ($textarea) {
        wp_editor(Quform::escape($textarea->getValue()), $textarea->getUniqueId(), array(
            'textarea_name' => $textarea->getFullyQualifiedName()
        ));
    }
});

add_action('quform_pre_display_1', function (Quform_Form $form) {
    $textarea = $form->getElement('quform_1_3');

    if ($textarea) {
        wp_editor(Quform::escape($textarea->getValue()), $textarea->getUniqueId(), array(
            'textarea_name' => $textarea->getFullyQualifiedName()
        ));
    }
});

On line 1, replace the number 1 with the form ID
On line 2, replace 1_3 with the Textarea element unique ID

function my_textarea_editor(Quform_Form $form)
{
    $textarea = $form->getElement('quform_1_3'); 
    if ($textarea) {
        wp_editor(Quform::escape($textarea->getValue()), $textarea->getUniqueId(), array(
            'textarea_name' => $textarea->getFullyQualifiedName()
        ));
    }
}
add_action('quform_pre_display_1', 'my_textarea_editor');

function my_textarea_editor(Quform_Form $form)
{
    $textarea = $form->getElement('quform_1_3');

    if ($textarea) {
        wp_editor(Quform::escape($textarea->getValue()), $textarea->getUniqueId(), array(
            'textarea_name' => $textarea->getFullyQualifiedName()
        ));
    }
}
add_action('quform_pre_display_1', 'my_textarea_editor');

On line 3, replace 1_3 with the Textarea element unique ID
On line 11, replace the number 1 with the form ID

Then go to Forms → Settings → Custom CSS & JS and at the Custom JavaScript field add the following code.

1
2
3

jQuery(function ($) {
    $('.quform-field-1_3').replaceWith($('.wp-editor-area[name="quform_1_3"]').closest('.wp-editor-wrap'));
});

jQuery(function ($) {
    $('.quform-field-1_3').replaceWith($('.wp-editor-area[name="quform_1_3"]').closest('.wp-editor-wrap'));
});

Replace both occurrences of 1_3 with the Textarea element unique ID

How do I add a Visual Editor to a Textarea?

Show legacy instructions

Explore

Feedback

About us

We are web team who one sunny day decided to become ThemeCatcher and devote our combined efforts to make web products that are user friendly and affordable.

We have been building web sites as a team since 2002, we ran an agency for 3 years before moving to ThemeCatcher which has been our most suited project thus far.

You'll find our work on the Envato Network, you can visit our portfolios on CodeCanyon and on ThemeForest.