TGrapeJSEditor Component

TMS Web Core wrapper for GrapeJS visual HTML/CSS editor. Integrates with the CSS Database System via TAPIDataset for loading and saving templates.

TMS Web Core GrapeJS PostgreSQL Visual Editor

Overview

TGrapeJSEditor embeds the GrapeJS visual page builder directly into your TMS Web Core application. It provides:

Full visual HTML/CSS editing with drag-and-drop
Direct database integration via TAPIDataset properties
Automatic CSS extraction and import to PostgreSQL
Template loading and saving with version control
Undo/Redo support
Responsive device preview

Installation

The component is registered in the Framework Core palette. Drop it onto your form and configure the dataset properties.

Properties

Property	Type	Description
`TemplateId`	Int64	Current template ID for load/save operations
`APILoadDataset`	TAPIDataset	Dataset for `website.gettemplate()`
`APISaveDataset`	TAPIDataset	Dataset for `website.updatetemplate()`
`APIClearCssDataset`	TAPIDataset	Dataset for `css.cleartemplatecss()`
`APIImportCssDataset`	TAPIDataset	Dataset for `css.importgrapejscss()`
`APIDeleteDataset`	TAPIDataset	Dataset for template deletion
`APIUpdateDataset`	TAPIDataset	Dataset for template updates
`AutoSave`	Boolean	Enable auto-save (default: False)
`AutoSaveInterval`	Integer	Auto-save interval in ms (default: 30000)
`ShowDevices`	Boolean	Show device switcher (default: True)
`ShowLayers`	Boolean	Show layers panel (default: True)
`ShowBlocks`	Boolean	Show blocks panel (default: True)
`ShowStyles`	Boolean	Show styles panel (default: True)
`ShowTraits`	Boolean	Show traits panel (default: True)

Events

Event	Signature	Description
`OnEditorLoaded`	`procedure(Sender: TGrapeJSEditor)`	Fired when GrapeJS initializes
`OnSave`	`procedure(Sender: TGrapeJSEditor; const Html, Css: string; CssRulesJson: TJSObject)`	Fired after successful save
`OnChange`	`procedure(Sender: TGrapeJSEditor)`	Fired on any editor change
`OnError`	`procedure(Sender: TGrapeJSEditor; const ErrorMessage: string)`	Fired on errors

Methods

Method	Description
`InitEditor`	Initialize GrapeJS (call after form loads)
`LoadTemplate(TemplateId: Int64)`	Load template from database
`SaveTemplate`	Save current content to database
`SetContent(Html, Css: string)`	Set editor content directly
`GetHtml: string`	Get current HTML
`GetCss: string`	Get current CSS as text
`GetCssAsJson: TJSObject`	Get CSS as JSON array (for database import)
`ClearEditor`	Clear all content
`Undo`	Undo last action
`Redo`	Redo last undone action

Usage Example

PROCEDURE TfrmEditor.WebFormShow(Sender: TObject);
BEGIN
   GrapeJSEditor1.InitEditor;
END;

PROCEDURE TfrmEditor.GrapeJSEditor1EditorLoaded(Sender: TGrapeJSEditor);
BEGIN
   // Editor ready - load a template
   GrapeJSEditor1.LoadTemplate(123);
END;

PROCEDURE TfrmEditor.btnSaveClick(Sender: TObject);
BEGIN
   GrapeJSEditor1.SaveTemplate;
END;

PROCEDURE TfrmEditor.GrapeJSEditor1Save(Sender: TGrapeJSEditor; 
   CONST Html, Css: STRING; CssRulesJson: TJSObject);
BEGIN
   ShowMessage('Template saved successfully');
END;

PROCEDURE TfrmEditor.GrapeJSEditor1Error(Sender: TGrapeJSEditor; 
   CONST ErrorMessage: STRING);
BEGIN
   ShowMessage('Error: ' + ErrorMessage);
END;

Dataset Configuration

APILoadDataset

Should call website.gettemplate(fktemplateid_)

API: website.gettemplate
Parameters:
  - fktemplateid_ (Integer)

APIClearCssDataset

Should call css.cleartemplatecss(fktemplateid_, keepinherited_)

API: css.cleartemplatecss
Parameters:
  - fktemplateid_ (Integer)
  - keepinherited_ (Boolean) - typically True

APIImportCssDataset

Should call css.importgrapejscss(fktemplateid_, cssrules_)

API: css.importgrapejscss
Parameters:
  - fktemplateid_ (Integer)
  - cssrules_ (String - JSON array)

Save Flow

User calls SaveTemplate
Component extracts CSS rules from GrapeJS as JSON
Calls css.cleartemplatecss() to remove existing CSS
Calls css.importgrapejscss() with new CSS rules
Fires OnSave event on success

Load Flow

User calls LoadTemplate(TemplateId)
Component calls website.gettemplate()
Parses returned JSON including CSS bindings
Reconstructs CSS text from bindings
Sets HTML and CSS into GrapeJS editor

CSS JSON Format

The component extracts CSS in this format for database import:

[
  {
    "selector": ".card",
    "priority": 1,
    "mediaQuery": null,
    "properties": [
      {"name": "background-color", "value": "#ffffff", "important": false},
      {"name": "border-radius", "value": "8px", "important": false}
    ]
  },
  {
    "selector": ".card:hover",
    "priority": 2,
    "mediaQuery": null,
    "properties": [
      {"name": "box-shadow", "value": "0 4px 12px rgba(0,0,0,0.1)", "important": false}
    ]
  }
]