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
} );
Perfect, thanks!
Hey Nicola,
Glad to hear that you’ve found this helpful!
Cheers,
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
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,