PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. 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
    Member

    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 -> http://pastie.org/3499029 in your functions.php

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

    Posted 12 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 12 years ago on Friday April 6, 2012 | Permalink
  3. bradvin
    Member

    @espo_74:

    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 12 years ago on Monday April 9, 2012 | Permalink
  4. Thanks Brad...it 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
    		ob_start();
    
    		// 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 ),
    			ob_get_contents(),
    			$content
    		);
    
    		// End output buffering
    		ob_end_clean();
    	}
    
    	return $content;
    }
    Posted 12 years ago on Monday April 9, 2012 | Permalink
  5. bradvin
    Member

    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 12 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 12 years ago on Monday April 9, 2012 | Permalink
  7. dan_tatro
    Member

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

    Check out this new snippet -> http://www.pastie.org/3768690

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

    - Dan

    Posted 12 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 12 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 12 years ago on Thursday June 14, 2012 | Permalink
  10. sanz
    Member

    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 http://codex.wordpress.org/Function_Reference/wp_editor for the options you can pass in. I also used 'media_buttons' => false hide the insert/upload buttons.

    Scott

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