Rich Text HTML Fields

Experimental Snippet 🧪

Demo Video: https://www.loom.com/share/fc666b9d3e1f48ed9dc21a3fcadef783

Code

Filename: gw-rich-text-html-fields.php

<?php
/**
 * Gravity Wiz // Gravity Forms // Rich Text HTML Fields
 * https://gravitywiz.com/
 *
 * Experimental Snippet 🧪
 *
 * Demo Video: https://www.loom.com/share/fc666b9d3e1f48ed9dc21a3fcadef783
 *
 * @todo
 * 1. Add merge tag selector.
 * 2. Allow switching to text mode: window.switchEditors.go( 'rich_field_content', mode )
 * 3. Add support for inserting images.
 */

add_action( 'admin_init', function() {
	if ( GFForms::get_page() === 'form_editor' ) {
		wp_enqueue_editor();
	}
} );

add_action( 'gform_field_standard_settings_200', function() {
	?>

	<li class="content_setting rich_content_setting field_setting">
		<label for="field_content" class="section_label">
			<?php esc_html_e( 'Content', 'gravityforms' ); ?>
			<?php gform_tooltip( 'form_field_content' ); ?>
		</label>
		<?php
		$id       = 'field_rich_content';
		$settings = array(
			'tinymce'       => true,
			'textarea_name' => $id,
			'editor_height' => 250,
		);
		wp_editor( '', $id, $settings );
		?>
	</li>

	<style>
		.rich_content_setting label {
			position: relative;
			z-index: 2;
		}
		#wp-field_rich_content-wrap {
			margin-top: -2.7rem;
		}
		.content_setting:not( .rich_content_setting ) {
			display: none !important;
		}
	</style>

	<script>
		jQuery( document ).on( 'gform_load_field_settings', function( event, field ) {
			var id = 'field_rich_content';
			wp.editor.remove( id );
			jQuery( '#' + id ).val( field.content );
			wp.editor.initialize( id, {
				tinymce: {
					setup: function( editor ) {
						editor.on( 'Paste Change input Undo Redo', function () {
							SetFieldProperty( 'content', editor.getContent() );
						} );
					}
				},
				quicktags: true
			} );
		} );
		jQuery( document).on( 'tinymce-editor-setup', function ( event, editor ) {
			if ( editor.id === 'field_rich_content' ) {
				editor.settings.toolbar1 = 'bold,italic,underline,bullist,numlist,alignleft,aligncenter,alignright,link';
			}
		} );
	</script>

	<?php
} );

Comments

  1. kirakali56
    kirakali56 January 31, 2025 at 2:28 am

    Hi, I tried snipping but it doesn’t work and also leaving it active no longer allows me to select any form field to see or change the settings, thank you

    Reply
    1. Samuel Bassah
      Samuel Bassah Staff January 31, 2025 at 8:12 am

      Hi,

      Sorry to see it isn’t working for you, but I haven’t been able to recreate the issue. Can you please submit a support ticket for this, and provide us more information on the issue, preferable a screencast of how it works on your end?

      Best,

Leave a Reply

Your email address will not be published. Required fields are marked *

  • Trouble installing this snippet? See our troubleshooting tips.
  • Need to include code? Create a gist and link to it in your comment.
  • Reporting a bug? Provide a URL where this issue can be recreated.

By commenting, I understand that I may receive emails related to Gravity Wiz and can unsubscribe at any time.