How 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 the theme functions.php file (or create a plugin for it).

123
4
5
6
7
8
9
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

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
Be inspired. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy