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:
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.
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.
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.
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.
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.
We also added support for inserting links with relative URLs.
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 forum, feedback portal, or Direct-Trac support system.