Skip to main content

Editor API

Initialization​

interface EditorConfig {
    // Configuration for the editor items
    items: Array<Record<string, any>>;
    // Automatically apply changes to the data object
    autoApply?: boolean;
    // Enable or disable auto-saving of data
    autoSave?: boolean;
    // Define the current active batch for the editor
    activeBatch?: string;
    // Configuration for the top toolbar
    topBar?: {
        // Array of items for the toolbar
        items: Array<Record<string, any>>;
    };
    // Configuration for the bottom toolbar
    bottomBar?: {
        // Array of items for the toolbar
        items: Array<Record<string, any>>;
    };
    // Additional CSS class for the editor's box
    css?: string;
    // Initial values for the editor fields
    values?: Record<string, any>;
    // Placement of the editor (inline, modal, sidebar)
    placement?: "inline" | "modal" | "sidebar";
    // Set the editor to readonly mode
    readonly?: boolean;
    // Define layout for the editor
    layout?: "columns" | "default";
    // Function to handle action events
    onaction?: (ev: OnActionResult) => void;
    // Function to handle change events
    onchange?: (ev: OnChangeResult) => void;
    // Function to handle save events
    onsave?: (ev: OnSaveResult) => void;
    // Function to handle validation events
    onvalidation?: (ev: OnValidationResult) => void;
}

Properties​

  • items - configuration for the editor items
  • autoApply - automatically apply changes to the data object
  • autoSave - enable or disable auto-saving of data
  • activeBatch - define the current active batch for the editor
  • topBar - configuration for the top toolbar
  • bottomBar - configuration for the bottom toolbar
  • css - additional CSS class for the editor's box
  • values - initial values for the editor fields
  • placement - placement of the editor (inline, modal, sidebar)
  • readonly - set the editor to readonly mode
  • layout - define layout for the editor

Events​

  • onaction - triggered when an action occurs within the editor, allowing interception or alteration of the action.
  • onchange - triggered when changes are made to the editor fields, enabling monitoring of user input.
  • onsave - triggered when the editor data is saved, providing a point to handle save operations.
  • onvalidation - triggered when validation occurs, allowing for interception or modification of the validation process.

Helpers​

  • Visit the Features Guide to learn more about the widget's functionality.
  • Explore the samples to visualize the available features.