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

[Bob]

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]

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.

[Bob]

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]

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.

[Neli]

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

[Bob]

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]

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]

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

[Filembar]

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.