Skip to content

gw-rich-text-html-fields.php: Added image upload capabilities. #1075

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 5, 2025
Merged

gw-rich-text-html-fields.php: Added image upload capabilities. #1075

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
355facd
`gw-rich-text-html-fields.php`: Added image upload capabilities.
saifsultanc Apr 14, 2025
e0bc1c6
`gw-rich-text-html-fields.php`: Added image upload capabilities.
saifsultanc May 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 23 additions & 1 deletion gravity-forms/gw-rich-text-html-fields.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
add_action( 'admin_init', function() {
if ( GFForms::get_page() === 'form_editor' ) {
wp_enqueue_editor();
wp_enqueue_media(); // Required for media uploads
}
} );

Expand Down Expand Up @@ -70,7 +71,28 @@
jQuery( document).on( 'tinymce-editor-setup', function ( event, editor ) {
var editorId = 'field_rich_content';
if ( editor.id === editorId ) {
editor.settings.toolbar1 = 'bold,italic,underline,bullist,numlist,alignleft,aligncenter,alignright,link';
editor.settings.toolbar1 = 'bold,italic,underline,bullist,numlist,alignleft,aligncenter,alignright,link,image';

// Handle image insertion from media library
editor.addButton( 'image', {
icon: 'image',
tooltip: 'Insert Image',
onclick: function() {
var frame = wp.media({
title: 'Insert Media',
button: { text: 'Insert into HTML Field' },
multiple: false,
library: { type: 'image' }
} );

frame.on('select', function() {
var attachment = frame.state().get('selection').first().toJSON();
editor.insertContent('<img src="' + attachment.url + '" alt="' + attachment.alt + '" />');
} );

frame.open();
}
} );
Copy link

@coderabbitai coderabbitai bot Apr 15, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Image upload functionality looks good, but could use some enhancements.

The implementation correctly uses WordPress media API to handle image selection and insertion. The code appropriately:

  1. Opens the media library restricted to images
  2. Sets up the selection handler
  3. Inserts the selected image into the editor

A few suggestions for improvement:

Consider enhancing the implementation with:

 frame.on('select', function() {
     var attachment = frame.state().get('selection').first().toJSON();
-    editor.insertContent('<img src="' + attachment.url + '" alt="' + attachment.alt + '" />');
+    // Escape attributes for security
+    var url = attachment.url.replace(/"/g, '&quot;');
+    var alt = (attachment.alt || '').replace(/"/g, '&quot;');
+    
+    // Insert image with more attributes for better accessibility and control
+    editor.insertContent('<img src="' + url + '" alt="' + alt + '" class="size-full" />');
 } );

It might also be helpful to check if the TODO item related to image support should be removed from the file's header since it's now implemented:

🏁 Script executed:

#!/bin/bash
# Look for the TODO item related to image support
grep -n "Add support for inserting images" gravity-forms/gw-rich-text-html-fields.php

Length of output: 130

Image Upload Enhancement and Header Cleanup

  • The image insertion functionality using the WordPress media API is working well.

  • To further improve security and accessibility, update the image insertion code to escape attribute values and include an extra class. For example:

     frame.on('select', function() {
     var attachment = frame.state().get('selection').first().toJSON();
-    editor.insertContent('<img src="' + attachment.url + '" alt="' + attachment.alt + '" />');
+    // Escape attributes for security
+    var url = attachment.url.replace(/"/g, '&quot;');
+    var alt = (attachment.alt || '').replace(/"/g, '&quot;');
+    // Insert image with enhanced accessibility and control
+    editor.insertContent('<img src="' + url + '" alt="' + alt + '" class="size-full" />');
 } );

  • Additionally, the file header still contains the TODO "* 2. Add support for inserting images." (line 13). Since image support is now implemented, please remove this outdated comment.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
// Handle image insertion from media library
editor.addButton( 'image', {
icon: 'image',
tooltip: 'Insert Image',
onclick: function() {
var frame = wp.media({
title: 'Insert Media',
button: { text: 'Insert into HTML Field' },
multiple: false,
library: { type: 'image' }
} );
frame.on('select', function() {
var attachment = frame.state().get('selection').first().toJSON();
editor.insertContent('<img src="' + attachment.url + '" alt="' + attachment.alt + '" />');
} );
frame.open();
}
} );
// Handle image insertion from media library
editor.addButton( 'image', {
icon: 'image',
tooltip: 'Insert Image',
onclick: function() {
var frame = wp.media({
title: 'Insert Media',
button: { text: 'Insert into HTML Field' },
multiple: false,
library: { type: 'image' }
} );
frame.on('select', function() {
var attachment = frame.state().get('selection').first().toJSON();
// Escape attributes for security
var url = attachment.url.replace(/"/g, '&quot;');
var alt = (attachment.alt || '').replace(/"/g, '&quot;');
// Insert image with more attributes for better accessibility and control
editor.insertContent('<img src="' + url + '" alt="' + alt + '" class="size-full" />');
} );
frame.open();
}
} );

Copy link
Contributor

@veryspry veryspry May 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@saifsultanc

I do dig the suggestion to escape attribute values. The additional class suggestion I'm not sure is needed though.

Copy link

@coderabbitai coderabbitai bot May 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!


// Switch to visual/text mode.
jQuery(`#wp-${editorId}-wrap .switch-tmce, #wp-${editorId}-wrap .switch-html`).on('click', function() {
Expand Down
Loading