Skip to content

This quick-start project helps to bind data to the Blazor Rich Text Editor of Syncfusion in a Blazor WebAssembly app.

Notifications You must be signed in to change notification settings

SyncfusionExamples/how-to-bind-data-in-a-blazor-rich-text-editor-component

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

How to Bind Data in a Blazor Rich Text Editor Component

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

This quick-start project helps to bind data to the Blazor Rich Text Editor of Syncfusion in a Blazor WebAssembly app. This example explains how to bind the HTML data to the Rich Text Editor using one-way, two-way, and dynamic value binding. It also explains how to bind markdown data to the Rich Text Editor.

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 and links

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

Auto hyperlink of URL

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.

Related links

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

About

This quick-start project helps to bind data to the Blazor Rich Text Editor of Syncfusion in a Blazor WebAssembly app.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •