How do I add a Visual Editor to a Textarea?

This will be added to the plugin as an option in a future version. In the mean time, it can be done with custom code. 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
1
2
34
5
6
7
8
9
10
11
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
Be inspired. © 2018 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy