Categories
Share on twitter
Share on facebook
Share on linkedin
Whats new Angular Rich Text Editor

What’s New 2019 Volume 3 Beta: Angular Rich Text Editor

In Syncfusion’s beta release of Essential Studio 2019 Volume 3, the Rich Text Editor for Angular received major enhancements that address various real-time use cases, such as:

  • 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.

In this blog, I will summarize the enhancements made in the Rich Text Editor. All of these features are also available for JavaScript, React, Vue, ASP.NET MVC, ASP.NET Core, and Blazor.

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.

Copying and pasting image from Microsoft Word
Copying and pasting image from Microsoft Word

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.

Drag and drop image into Rich Text Editor
Drag and drop image into Rich Text Editor

Resizable editor

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.Resizable Rich Text Editor

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.

BLOB Base64
 <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.

Summary

Syncfusion invites you to try out these features already available in the Volume 3 beta release. For existing customers, the new version is available for download in the License and Downloads page.

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 forumfeedback portal, or Direct-Trac support system.

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin

Leave a comment

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top