• Material 3
  • Fluent
  • Fluent 2
  • Bootstrap 5
  • Tailwind CSS
  • High Contrast
  • Fluent 2 High Contrast
Preferences
Mode Selection
Touch
Mouse
Theme Selection
Theme Mode
Localization
*Translated by Google Translator.
Currency

Example of API in ASP.NET Core Block Editor Control

This sample demonstrates the usage of API in Block Editor. Use the properties panel to change read-only mode, enable/disable drag and drop, enable HTML encode, get JSON data, get block count, select all blocks, and control focus.

DEMO
SOURCE
ReadOnly
Enable Drag and Drop

In this demo, you can explore the API behaviors by:

  • Click the readOnly checkbox to enable/disable editable and non-editable mode of the Block Editor.
  • Click the enableDragDrop checkbox to enable/disable drag and drop functionality.
  • Click the getJsonData button to display the focused block JSON data in an alert window.
  • Click the getHtmlData button to display the editor content as HTML in an alert window.
  • Click the getBlockCount button to display the total number of blocks in an alert window.
  • Click the selectAllBlocks button to select all content in the editor.
  • Click the focusIn button to focus the editor.
  • Click the focusOut button to remove focus from the editor.
  • Click the print button to preview the content before printing from the editor.
Transform your ASP.NET Core web apps today with Syncfusion® ASP.NET Core components
100+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE
opens in a new tab