- Copying and pasting images from Microsoft Word and Outlook.
- Dragging and dropping images from a local path.
- The ability to resize the editor.
- Saving an image as a Base64 or a BLOB.
- Image uploading.
- Inserting relative URL links.
- Using file upload events.
Pasting images from Microsoft Word and Outlook
It’s a common practice to copy and paste content from Microsoft Word and Outlook to the Rich Text Editor control. In our previous release, Volume 2, we provided support for copying and pasting text from Word and Outlook to the editor with options to paste the content as plain text or preserve its format.
Now, we’ve enhanced this feature by including a provision to copy and paste images as well. Suppose you want to upload images to a server when pasting them. Now you can configure server properties in the Rich Text Editor to do that.
The online demo for this feature can be seen at https://ej2.syncfusion.com/demos/#/material/rich-text-editor/paste-cleanup.html.
Drag and drop images
With previous versions of the Rich Text Editor control, you could only drag and drop images within the editor to change their location. Now, you can insert images into the editor by dragging and dropping them from a local path.
This feature simplifies image-adding operations for the editor. In addition, you can upload the same images to the server by configuring the server properties.
The editor now has built-in support for resizing. To display the gripper at bottom-right corner of the editor, enable the resizing property. You can resize the editor by dragging this gripper, and you can configure the minimum or maximum width and height through CSS to block the resize ranges. The resize events—resizeStart, resize, and resizeStop—help when customizing from the application end.
Save image as BLOB or Base64
There’s a growing need to save images in Base64 format. If a user wants to insert a lot of tiny images in the editor and doesn’t want a separate physical location for them, then they can choose to save images as type Base64.
In the previous version of the Rich Text Editor, images were inserted as a BLOB when the server wasn’t configured to save the images. Now, we have provided support to insert images as BLOBs as well as in Base64 format. The Base64 format helps to directly bind content using data annotation. There is no need for image conversion. The following code listing shows BLOB and Base64 representations of an inserted image.
|<p><img class=”e-rte-image e-imginline” alt=”Steven.png” src=”blob:https://ej2.syncfusion.com/97dc0e10-8069-4868-b2b7-fefed228fd07” style=”min-width: 0px; min-height: 0px;” width=”auto” height=”auto”><br></p>||<p><img class=”e-rte-image e-imginline” alt=”Robert.png” src=”data:image/png;base64,iVBORw0KG…” style=”min-width: 0px; min-height: 0px;” width=”auto” height=”auto”><br></p>|
Note: Because it contains a large amount of data, the src in the Base64 code is abbreviated.
Image upload improvements
Apart from the features discussed so far, we have enhanced the usability of image uploads in the Angular Rich Text Editor. One such enhancement is the addition of file upload events. The following events are provided to customize image upload operations.
- ImageSelected is triggered when the image is selected or dragged into the Insert Image dialog.
- ImageUploading is triggered when the selected image begins to upload to the server.
- ImageUploadSuccess is triggered when the image is successfully uploaded to the server.
- ImageUploadFailed is triggered when there is an error with the image upload.
- ImageRemoving is triggered when the selected image is cleared from the file list.
We also added support for inserting links with relative URLs.
Also, if you wish to send us feedback or would like to submit any questions, please feel free to post them in the comments section of this blog post. You can also contact us through our support forum, feedback portal, or Direct-Trac support system.