How to shrink image size in Multiple Lines Textbox content

Forms SharePoint Online
1

how to shrink image size in Multiple Lines Textbox content, if i insert images into the Multiples Lines Text Box Component?

image
image1026×672 107 KB

image
image296×588 24.8 KB

2

Hello @jyou
Try to catch the event.

fd.spRendered(() => {
  fd.field("MultiTextField").$on("change", (el) => {
    console.log(el);
  });
});

Unfortunately, whenever you insert a picture, you have to click somewhere else in the form except the Field to make change happen.
But, if It will help you, you can make a fake "button" called "Format Picture" and when u click on it, on change event is fired and you can find <img> element in the field and add width and height. Although, it will just change the width and height, not the size of inserted picture.

1 Like
3

thank you for the reply, can you show me how I can write the function for the fake button please thanks.

4

Hi @jyou ,

Give me some time please, I am doing it in my free time - within day or two I will respond here :slight_smile:

5

Hello @jyou ,
Plumsail Forms - New Form - JS: (SharePoint Online)

fd.spRendered(() => {
  fd.field("TellUsMore").$on("change", (el) => {
    console.log(el);
  });
});

On the canvas in Plumsail Designer - add a button from the left pane:
image

Canvas looks like this:

image
image762×264 6.96 KB

The button does nothing. That's why I call it "fake" because when someone is typing inside the multiline text control and then insert an image, it is automatically added with full size, but the script is not executed. And when the user clicks on the button, you will have to create your own script to select HTML element of the Multiline Text field and find element for resizing.

When typing, nothing happens, but when I click on the button, here is the output in the developer console:

image
image865×237 5.47 KB

image
image994×72 1.18 KB

The sense of all of this is, that you must force the people to click on the fake button for the Multiline Text field to lose control and fire "change" event.

If anything is unclear, let me know and I will try to help you :slight_smile:
Stepan

6

Thank you for your clarification. I am wondering How i can write the function for the button to shrink the image in the multi line textfield in javascript.

How do I change width and height in mltil lines textbox using Javascript?

7

@jyou
This should help you :slight_smile:
Note:

  1. Replace "InternalNameOfColumn" with your name of the column
  2. I kept the comments in the script
  3. Change picWidth and picHeight to your needs - I selected 128px - but it is configurable.
fd.spRendered(() => {
  localStorage.clear();
  fd.field("InternalNameOfColumn").$on("change", (el) => {
    // Define the width and Height of the images
    // Picture Width
    const picWidth = 128;
    // Picture Height
    const picHeight = 128;

    // Convert the inserted HTML string to DOM elements
    const htmlContent = el;
    // Create temp Div
    const tempDiv = document.createElement("div");
    // Insert content to Div
    tempDiv.innerHTML = htmlContent;

    // Select all img elements within the inserted HTML content
    const imgElements = tempDiv.querySelectorAll("img");

    // Check if any img elements are found
    if (imgElements.length > 0) {
      // Loop through each img element
      imgElements.forEach(function (imgElement) {
        // Set the width and height attributes based on global variables
        imgElement.setAttribute("width", picWidth);
        imgElement.setAttribute("height", picHeight);
        console.log("Image element resized:", imgElement);
      });

      // Replace the original HTML content with the modified content
      fd.field("InternalNameOfColumn").value = tempDiv.innerHTML;
    } else {
      console.log("Image elements not found");
    }
  });
});

Have a nice rest of the day
Stepan

8

Hello @jyou ,
did my previous post help you or are you struggling for to finalize it?
Thank you
Stepan