Please Note: We are no longer using forums to facilitate standard support. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

How To: Rich Text Field Editor

  1. dan_tatro

    I've seen this question asked quite a bit in the forums ... "How do I add a rich text editor/TinyMCE to my form?".

    I know that the guys are planning to support this in the future, but in the mean time here is a stop gap.

    1. Insert a Paragraph Text field to your form
    2. Change the CSS Class Name to "gf_html" (on the Advanced tab)
    3. Paste this code -> in your functions.php

    Be careful ... data validation gets trickier with HTML.

    Posted 3 years ago on Thursday March 1, 2012 | Permalink
  2. Thanks a ton! this is great...close to what I was hoping for. I'm not an adept programmer by any means and am looking to add this functionality to the GF Custom Post Type area....any ideas how to do that?

    When I include the style on any of the form fields (Post Field-->Custom Field Field Type: Paragraph Text) it does not display--but it does when it is a simple Paragraph field (Standard Field--> Paragraph Text).

    Any thoughts on how I would change this for these types of fields (this form has about 5 of them used to create a page)

    Posted 3 years ago on Friday April 6, 2012 | Permalink
  3. bradvin


    in the code snippet, change

    if( ( 'textarea' == $field['type'] ) &&

    to read

    if( ( 'textarea' == $field['post_custom_field'] ) &&

    to make it work with the post custom field.

    This code however does not check that the custom field is set to be a paragraph, but I do not think it should be a problem

    Posted 3 years ago on Monday April 9, 2012 | Permalink
  4. Thanks still a no go. I'll keep hacking away at this.

    // Add a WP Editor to the Paragraph Text field
    add_action( 'gform_field_content', 'gform_html_editor', 10, 5 );
    function gform_html_editor( $content, $field, $value, $lead_id, $form_id ) {
    	// HTML & textarea?
    	if( ( 'textarea' == $field['post_custom_field']  ) && ( 'gf_html' == $field['cssClass'] ) ) {
    		// Start output buffering
    		// Create a wp_editor
    		$settings = array(
    			'teeny' => true
    		wp_editor( $value, "input_{$field['id']}", $settings );
    		// Replace the textarea with the editor
    		$start_textarea = strpos( $content, '<textarea' );
    		$end_textarea = strpos( $content, 'textarea>' ) + 9;
    		$content = str_replace(
    			substr( $content, $start_textarea, $end_textarea - $start_textarea ),
    		// End output buffering
    	return $content;
    Posted 3 years ago on Monday April 9, 2012 | Permalink
  5. bradvin

    I just saw my prev comment and noticed a horrible copy n paste error!

    it should be:

    if( ( 'post_custom_field' == $field['type'] ) &&

    hahahaha! Sorry about that :)

    Posted 3 years ago on Monday April 9, 2012 | Permalink
  6. Thanks Brad--appreciate your following up on this with the code.

    In case anyone else is using this--I also wanted to disable some of the options for this specific form so I just used some CSS to accomplish this by hiding some of the buttons. Quick and easy hack. Probably a better way to do it, but this worked.

    mce_bullist, .mce_numlist, .mce_blockquote, .mce_underline, .wp-editor-tools { display:none !important; }
    Posted 3 years ago on Monday April 9, 2012 | Permalink
  7. dan_tatro

    Here's a quick followup regarding your replies ...

    Check out this new snippet ->

    Added support for Custom Fields (textarea)
    Added a filter to add/remove editor buttons
    Noted a setting (quicktags) to disable HTML view

    - Dan

    Posted 3 years ago on Wednesday April 11, 2012 | Permalink
  8. I tried to add this, and it does not work when using the Post Body Field in GF, it does however work on a normal paragraph field, but when using the paragraph field it won't go in as the post body

    Edit: it seems I have figure it out

    if ( (( 'post_content' == $field['type'] )

    Posted 3 years ago on Thursday April 12, 2012 | Permalink
  9. Thanks for the follow up Dan--better than the css hack i had going. I still have to display:none the wp-editor tools but that is no problem.

    Any idea on how to include the mce_pasteword or mce_pastetext options?

    Posted 3 years ago on Thursday June 14, 2012 | Permalink
  10. sanz

    Thanks Dan ... was looking for this exact solution. Works perfectly when using GF 1.6.9.

    @espo_74 - setting 'teeny' => false will enable the full WP editor. Check out for the options you can pass in. I also used 'media_buttons' => false hide the insert/upload buttons.


    Posted 3 years ago on Wednesday November 14, 2012 | Permalink


Support Tickets

Open A New Support Ticket
 Open A New Priority Support Ticket *

* Developer license holders only