USP Pro makes it easy to display textareas that use the WordPress RTE/TinyMCE/Visual Editor. 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:

[usp_content richtext="on"]

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|data-richtext#true

Here, field#textarea defines the Custom Field as a <textarea>, and 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 used only in the form markup and not anywhere else, so it’s pretty much arbitrary. It just enables WP’s RTE JavaScript to distinguish between the various fields. Thus, the 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.

Take-home message

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.

Related