DevExtreme - HTML Editor - Resizing Media Blocks (v19.1)

18 June 2019

We recently released our DevExtreme HTML Editor and, while it is already working well, improving it is an on-going process. In v18.2, we added support for images and media files but without the ability to resize them interactively. In v19.1, we added support for this feature, and in doing so, made sure that we added the ability to specify a number of options on the resize behaviour.

First you can decide to enable or disable the resizing, and second you can specify which targets are allowed to be resized.

mediaResizing: { 
    enabled: true, // enables resizing   
    allowedTargets: ["images"] // specifies resizable media types 
}                 
            

How does it work?

Given the fact that you have enabled the resizing feature as mentioned above, once you click an image, a resizing frame and grab-handles. These enable you to resize the object.

And how does it work on a mobile device?

Since DevExtreme controls should work great on any device, when using this feature on a mobile device, we'll adjust the handles and make them bigger so you can resize with your finger.

Limitations and future plans?

The resizing functionality at this stage can only be applied on images. We're currently working on resizing video blocks as well. Another thing we are working on is the ability to keep the aspect ratio of the media block which is currently being resized.

Try it out?

If you're ready to test this feature, just download and install the current v19.1 release or use NPM to add DevExtreme to your project

npm install --save devextreme@19.1-stable
            

What do you think?

Let me know what you think of this feature by replying on this post.

5 comment(s)
Ben_Hayat

Hi Don;

When a user creates some content in this component (text, images and etc) on the client side, how do we as developers take that full content as a single entity and then save it into the backend DB in ASP.Net Core? Suppose user is writing some daily notes for her and needs to save it in her daily logs to be viewed later on.

What would be the process/steps? I couldn't find any docs or samples on it.

Thank you in advance.

..Ben

18 June, 2019
Mojo

But still not possible to edit the HTML markup?

18 June, 2019
Lena (DevExpress Support)

Hi Ben,

I  suggest you take a look at two approaches:

1. Just get the HtmlEditor value option and save it in your database.

2. If you use it in any form, you can wrap it with the "HtmlEditorFor" extension to bind it to the model-based data and post the resulting HTML back to the controller.

Anyway, the best place to resolve the DevExpress-related technical issues is our Support Center. Feel free to submit a ticket - http://www.devexpress.com/ask.

19 June, 2019
Lena (DevExpress Support)

Hi Mojo,

At the moment, we don't have plans to provide the ability to edit HTML markup. Nevertheless, we would appreciate it if you describe your scenario and expectations in our Support Center - http://www.devexpress.com/ask

19 June, 2019
Ben_Hayat

Thanks Lena;

19 June, 2019

Please login or register to post comments.