Resizing images in the editor - can it be turned off?

4 Answers 25 Views
Editor
Bob
Top achievements
Rank 2
Iron
Veteran
Iron
Bob asked on 02 Feb 2022, 05:26 PM

I just started using the new feature to resize images in the editor and it works great!  However, we have a need to support fixed size images that cannot be resized by the end user creating documents in the editor.  So, can the resize be configured to turn on or off as needed?

Thanks, Bob

Bob
Top achievements
Rank 2
Iron
Veteran
Iron
commented on 03 Feb 2022, 03:49 PM

To clarify, we need to turn off individual images.  Therefore, if there are two images in the same editor, one can be resized and one cannot be resized.

4 Answers, 1 is accepted

Sort by
0
Accepted
Bob
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 16 Feb 2022, 08:17 PM | edited on 18 Feb 2022, 04:40 PM

We solved this with the following changes.

First, create style to hide resize bars by default:

  // Hide image resize handles by default to avoid blinking handles when image is selected
  .k-element-resize-handle-wrapper {
    display: none;
  }

Then, provide a click handler to allow or block the resizing as the image is inserted.  Please note that we are using this in Angular.  "image" is our own data element that provides the information to be inserted into the editor.


      const resizeHandlersSelector = `img[data-id=\\'${image.id}\\']`;
      const resizeHandlersDisplayStyle = image.isResizable ? 'block' : 'none';

      const onClickHandler = `
        const elements = document.querySelector('${resizeHandlersSelector}').closest('.inline-editor').querySelectorAll('.k-element-resize-handle-wrapper');

        for (el of elements) {
          el.style.display = '${resizeHandlersDisplayStyle}';
        }`;

      const html = `<img src="${image.source}" data-id="${image.id}" data-type="${image.extType}" width="${image.displayWidth}" height="${image.displayHeight}" onclick="${onClickHandler}" />`;
      this.kendoEditor.exec('inserthtml', { value: html });
      this.kendoEditor.focus();

Neli
Telerik team
commented on 21 Feb 2022, 08:33 AM

I'm happy to hear that you've managed to find a solution to the issue. Also, thank you for sharing your solution with our community. I am sure it will help to the other users in the forum.
0
Neli
Telerik team
answered on 07 Feb 2022, 10:15 AM

Hi Bob,

I would suggest you add a custom class to the needed images. Then you could set the needed width and height to that class. For example:

<textarea id="editor" rows="10" cols="30" style="width:100%; height:840px" aria-label="editor">
            &lt;img class="custom" src="https://demos.telerik.com/kendo-ui/content/web/editor/tenerife.png" style="float: right;" alt="" /&gt;
            &lt;img  src="https://demos.telerik.com/kendo-ui/content/web/editor/tenerife.png" style="float: right;" alt="" /&gt;
        </textarea>

<script>
            var editor = $("#editor").kendoEditor({
                stylesheets: [
                    "./editor.css",
                ]
            });
</script>

And in the editor.css stylesheet you could set the width and height:

.custom{
        width:150px !important;
        height:150px !important;
 }

I hope this helps.

Regards,
Neli
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Bob
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 07 Feb 2022, 03:03 PM

Hello Neli,

Although this solution does prevent the resize of the image, it seems to be impractical because the editor must support multiple images of varying sizes that are added by the end user.  Since the sizes of the images are unknown until the author enters these images, it would be difficult to setup classes to define fixed sizes.  The CSS would have to be created dynamically as the images are added.   I tried using an inline style, but that did not prevent the resize.  It seems like it must be a class.

Also, the sizing controls are still visible even though they are not usable.  Not a big problem, but looks confusing, especially when there are a mix of sizable and non-sizable images in the same editor.

I will look into creating dynamic CSS, but if you have a more practical solution, that would be much appreciated.

Thanks, Bob

 

Neli
Telerik team
commented on 10 Feb 2022, 09:03 AM

Hi Bob,

I am afraid I could not suggest a different approach for achieving the desired behavior.

If you think that such enhancement would be a valuable addition to the widget`s functionality I would encourage you to log a Feature Request in our official Feedback Portal. This way the other users in the community could vote for the idea. 

- https://feedback.telerik.com/kendo-jquery-ui

Regards,

Neli

Bob
Top achievements
Rank 2
Iron
Veteran
Iron
commented on 10 Feb 2022, 02:22 PM

Hi Neli,

I have not had a chance to see if the dynamic CSS will be a viable solution, but I think I can get that to work.  Thank you for your help!

Bob

0
Filembar
Top achievements
Rank 1
Iron
Iron
answered on 16 Feb 2022, 10:21 AM | edited on 04 Mar 2022, 11:52 AM

only images that were in the note before the note was loaded are recognized by the add-on. For example, you can add an image to a note in the browser, which won't be able to be resized. You can then click away from the image to another note, and then come back. Et voila, the image can now be resized! When adding cards, you can use the frozen fields addon to test this. Images that were in a frozen field can only be resized after adding a new card.

After digging into the code, I suspect the problem is the "note_is_loaded" added to the "editor_did_load_note" hook. It only loads when the note is first opened; nothing happens to newly added azar echatrandom images.
Tags
Editor
Asked by
Bob
Top achievements
Rank 2
Iron
Veteran
Iron
Answers by
Bob
Top achievements
Rank 2
Iron
Veteran
Iron
Neli
Telerik team
Filembar
Top achievements
Rank 1
Iron
Iron
Share this question
or