USP Pro makes it easy to display textareas that use WP’s Visual/TinyMCE/Rich Text Editor (RTE). Just add the
[usp_content] shortcode to any USP Form and give it an attribute of
richtext="on". This tutorial takes it further by showing how to enable WP Visual Editor with custom textareas, and even include multiple visual editors on the same form.
Enable Visual Editor on Post Content Field
First the basics. To enable the WP RTE/Visual Editor on the Post Content Field, include the following in any USP Form:
And of course other shortcode attributes may be added as needed to customize the content field. As you might expect, you can disable the Visual Editor by changing the “on” to “off” (can also use “true” or “false”).
Enable Visual Editor on any Custom Textarea
To enable the WP Visual Editor on any custom
<textarea>, add the following string to the Custom Field definition:
field#textarea defines the Custom Field as a
data-richtext#true enables the RTE/Visual Editor for the field.
Multiple Visual Editors
To display multiple RTE/Visual Editors in a form, we need to add the
rte_id attribute to each custom-field definition. So for example, if we have defined three Custom Fields like so:
field#textarea|data-richtext#true field#textarea|data-richtext#true field#textarea|data-richtext#true
..we would need to modify them like so:
field#textarea|data-richtext#true|rte_id#one field#textarea|data-richtext#true|rte_id#two field#textarea|data-richtext#true|rte_id#three
That’s all there is to it. The value of
rte_id is not required when only one RTE is displayed.
Note: use only lowercase letters for the value of
rte_id. Otherwise it won’t work properly.
The take-home message here is that you can enable the Visual Editor for any custom field — you can even enable multiple RTEs on each form. Just keep in mind that the Visual Editor requires additional code and resources, so check the loading times of your pages both with and without the RTEs enabled and compare the difference.