A more user friendly way to add rich media to forms

theo louca
Tue, 03 Sep 2024 09:06:25 +0000
Get Help

Have had a read of How to… Add Images to a Form (using Gravity Forms)

I’ve always wondered if there may be a way to present a more user friendly way for a non html savvy client to populate forms with rich media.

One thing i’ve tried for myself is to hook in tinyMCE into the HTML Block field, unfortunately Gravity forms doesn’t seem to accept content generated from it when you save the form.

I just wondered if anyone else has thought this, and if so what solutions did they come up with?

function enqueue_gf_tinymce_scripts($hook) {
    // Check if we are on the Gravity Forms form editor page
    if ('toplevel_page_gf_edit_forms' == $hook) {
        // Enqueue WordPress TinyMCE script
        wp_enqueue_script('wp-tinymce');
        wp_enqueue_script('jquery');
        wp_enqueue_script('editor');
        wp_enqueue_script('quicktags');
        wp_enqueue_script('wplink');
        wp_enqueue_style('editor-buttons');
    }
}
add_action('admin_enqueue_scripts', 'enqueue_gf_tinymce_scripts');

function add_gf_html_tinymce_init() {
    ?>

        jQuery(document).ready(function ($) {
            // Ensure TinyMCE is available
            if (typeof tinymce !== 'undefined') {
                // Hook into the Gravity Forms editor load event
                $(document).on('gform_load_field_settings', function (event, field) {
                    if (field.type === 'html') {
                        var textareaID = '#field_content';
                        // Destroy any existing editor to avoid duplication
                        if (tinymce.get(textareaID.replace('#', ''))) {
                            tinymce.get(textareaID.replace('#', '')).remove();
                        }
                        // Initialize TinyMCE with the necessary toolbar and plugins
                        tinymce.init({
                            selector: textareaID,
                            menubar: false,
                            toolbar: 'formatselect | bold italic underline | bullist numlist | alignleft aligncenter alignright | link unlink | image | undo redo | removeformat',
                            plugins: 'lists link image',
                            height: 300,
                            setup: function (editor) {
                                editor.on('change', function () {
                                    // Save the content to the textarea before the form is saved
                                    editor.save();
                                    $(textareaID).trigger('change');
                                });
                            }
                        });
                    }
                });

                // Ensure content is saved when the user switches fields or saves the form
                $(document).on('gform_field_advanced_settings', function(event, field) {
                    if (field.type === 'html') {
                        var textareaID = '#field_content';
                        if (tinymce.get(textareaID.replace('#', ''))) {
                            tinymce.get(textareaID.replace('#', '')).save();
                            $(textareaID).trigger('change');
                        }
                    }
                });
            } else {
                console.error('TinyMCE is not available.');
            }
        });

    <?php
}
add_action('admin_footer', 'add_gf_html_tinymce_init');

4 posts - 3 participants