Breadcrumb arrow Back to Code Examples

How To Rename And Check The Image Size Before Inserting It Into A Blazor Rich Text Editor Component

Sample date Updated on Feb 15, 2024
Browse Code Git logo Download
blazor-rich-text-editor image rename wysiwyg-editor

The Blazor Rich Text Editor is a feature-rich WYSIWYG HTML editor and WYSIWYG Markdown editor.

This quick-start project helps to rename the uploaded image file and check its size before inserting it in the Blazor Rich Text Editor of Syncfusion in a Blazor WebAssembly app. This example explains how to rename the uploaded image file at the client side using the RTE’s OnImageUploadSuccess event and check the image size before uploading to the server side using the BeforeUploadImage event.

Prerequisites

  • Visual Studio 2022

How to run the project

  • Checkout this project to a location in your disk.
  • Open the solution file using the Visual Studio 2022.
  • Restore the NuGet packages by rebuilding the solution.
  • Run the project.

Further help

To get more help, check out the ASP.NET Core Blazor documentation.

Features and benefits

WYSIWYG HTML editor

The Blazor Rich Text Editor component can be used as a WYSIWYG HTML editor. It allows users to view and change the content to HTML markup and to view the HTML source using the Code View icon.

Markdown editor

The Blazor Rich Text Editor control can be used as a Blazor WYSIWYG Markdown Editor. It allows the content to be in the markdown format. The typed markdown syntax content can be previewed using a third-party plugin.

Inline mode

Makes the inline HTML editor to show up when you click or select the content in an editable area.

WYSIWYG HTML editor Iframe mode

The Blazor Rich Text Editor supports Iframe editing with customized Iframe attributes. It also easily changes the appearance of the Iframe editor’s content when using external CSS and script files.

HTML editor toolbar

The WYSIWYG HTML editor toolbar provides a variety of commands for editing and formatting the content. You can format text, paragraphs, and insert images, hyperlinks, tables, lists, etc. The tool commands are grouped based on related functionality.

Insert images to the content from a local path or server path with image captions and then link URLs to the images. Upload images to a server with drag-and-drop or file upload. Insert or change the hyperlinks with customization options such as display text, tooltip, and link to be opened in a new window.

Full screen text editor

The built-in option makes the WYSIWYG HTML editor full screen size (full page editor) for editing the content.

Source code (HTML) view

Examine and edit the HTML code directly in the source code and view the preview result (HTML live editor).

Configured to turn text into a hyperlink automatically when the user types the URL as a plain text.

Blazor form validations

The Blazor Rich Text Editor is a form component that seamlessly supports forms and obtains values on form submission. The two types of validation are,

  • Required validation
  • Maximum length validation

Resizable editor

The Rich Text Editor for Blazor has built-in resizable support that helps widen or shrink the content area.

Touch-friendly and responsive WYSIWYG editor

The Rich Text Editor for Blazor (mobile HTML editor) recognizes touch gestures, allowing the user to swipe left or right to move the toolbar. The responsive, mobile-friendly design provides the best user experience on all mobiles, tablets, and desktop form factors.

Globalization

Right to Left (RTL)

Allows the text direction and layout of the text editor to be displayed from right to left. This improves the user experience and accessibility for RTL languages such as Arabic, Farsi, Hebrew, etc.

Localization

Customize all static texts used in the Blazor Rich Text Editor component using the localization library.

Learn More about Blazor Rich Text Editor

Download Free Trial

Pricing

Documentation

Online Examples

Watch a How-to Video

Community Forums

Suggest a feature

About Syncfusion Blazor Components

Syncfusion's Blazor components library offers over 70 UI components to work with Blazor server-side and client-side (Blazor WebAssembly) projects seamlessly. In addition to Rich Text Editor, we provide popular Blazor components such as DataGrid, Charts, Scheduler, Diagram, and Word Processor.

About Syncfusion

Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 23,000+ customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.

Today, we provide 1600+ controls and frameworks for web (Blazor, ASP.NET Core, ASP.NET MVC, ASP.NET WebForms, JavaScript, Angular, React, Vue, and Flutter), mobile (Xamarin, Flutter, UWP, and JavaScript), and desktop development (Windows Forms, WPF, WinUI(Preview) and UWP). We provide ready-to-deploy enterprise software for dashboards, reports, data integration, and big data processing. Many customers have saved millions in licensing fees by deploying our software.

[email protected] | www.syncfusion.com | 1-888-9 DOTNET

Up arrow