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() {
?>
<script type="text/javascript">
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.');
}
});
</script>
<?php
}
add_action('admin_footer', 'add_gf_html_tinymce_init');