Progress Telerik UI for Blazor

Editor

  • The Blazor Editor component lets your users create rich text content in a familiar MS Word editor experience—with text formatting, tables, images, lists, undo and redo, fonts, links and more options.
  • This component is part of the largest truly native Blazor component suite - Telerik UI for Blazor designed to perfectly fit in any app’s requirement.
  • The Blazor UI suite also comes with professionally designed themes enabled with a flip of a switch, document processing library, rich docs & demos to help you get started in no time.

Telerik UI for Blazor Suite
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
  • Overview

    The Telerik UI for Blazor Editor component is a WYSIWYG in-app editor designed for the creation of rich documents. Users can always open their favorite document editor and apply their changes there but why have them rely on another app when they can do everything in your project? The format of the resulting doc is HTML so it can be easily presented elsewhere in the application.

    Check out the Blazor Editor demo

    Telerik UI for Blazor Editor Overview
  • Toolbar

    A Toolbar is rendered on the top of the Editor component and provides access to the commands available to the user. Commands include everything you would expect from an editor - undo and redo, changing the text decorations and weight, font, alignment, insertion of tables, bullet lists, etc. The toolbar uses your app’s theme for its visual style so you can transform its looks to fit the app.

    Telerik UI for Blazor Editor Toolbar
  • Tools

    The commands available on the Toolbar are called tools. The Editor ships with a plethora of tools and by default will display them all on the toolbar. These include a color palette to pick the color, button for toggling bold, italic or underline, align the text, etc. They're also accessible programmatically and you can execute them from code if need be. The set of items is completely customizable. If you want to remove an unnecessary command or even add a custom command this is easily doable as the controls takes a list of IEditorTools which can contain as many or as few commands you want to.

    See the available Blazor Editor Tools

    Telerik UI for Blazor Editor
  • Edit Modes

    The Editor control can be configured to work either as an IFrame (the default) or as a Div. The difference between the two is the type of element which hosts the content area. When the content is displayed in an IFrame, it doesn’t inherit CSS rules from the current page. This makes it impossible to erroneously introduce a style which will break the editor but may also be limiting.

    Telerik UI for Blazor Editor Validation
  • Pasting Cleanup

    When pasting content from other applications (e.g. MS Word or a website), the Editor will try to preserve the original formatting like bullet lists and links as much as possible while removing unsupported information. You have control over what exactly is kept and what is thrown away. 
    Telerik UI for Blazor Editor
  • Copy/Paste Images

    Saving your users’ time and effort by integrating an editor in your web app is the core premise of this control so saving another couple of clicks of adding new images as opposed to simple copy/paste is only natural.  

    The Editor component supports copying and pasting images directly in the editing area with some limitations due to browser permissions. Check the docs for information about the limitations. 
    Telerik UI for Blazor Editor
  • Import and Export

    The HTML format of the generated document might be impractical in some situations where you would need a more standard one like .doc, .rtf or .pdf. Your Blazor license also includes access to the Telerik Document Processing Tools which you can use to import and export the contents of the Editor to your preferred file type.

  • Events

    Every once in a while (100ms by default), if the user has changed the contents of the Editor, the control will trigger the ValueChanged event.

    Telerik UI for Blazor Events
  • Localization

    The built-in tools are fully localizable, and their tooltips will change depending on the currently active language. This makes the editor usable in any app, regardless of the user's language skills.

    Learn more about Telerik UI for Blazor Editor localization

    Telerik UI for Blazor Globalization and Localization
  • Keyboard Navigation

    Like most other Telerik UI for Blazor components, the Editor has built-in Keyboard Navigation implemented which allows you to easily navigate through it by using just the keyboard.

    Telerik UI for Bazor Keyboard Navigation

Next Steps

Launch demos

See Telerik UI for Blazor in action and check out how much it can do out-of-the-box.

Download free trial

Try Telerik UI for Blazor with dedicated technical support.