Code Editor

TsgcHTMLComponent_CodeEditor: een code-editor voor webpagina's op basis van CodeMirror 6. Hij markeert SQL, JSON, JavaScript, HTML, CSS, XML, Markdown, Python en Pascal, vouwt blokken, zoekt en vervangt, vult SQL aan met de tabellen en kolommen van je schema en markeert JSON-fouten tijdens het typen. Zijn tekst wordt zoals een textarea met het formulier verzonden, in Delphi, C++ Builder en .NET.

TsgcHTMLComponent_CodeEditor

Stel de Language in en zet zijn HTML in een formulier. De tekst staat in een <textarea> die het formulier verzendt zoals elk ander veld, zodat de editor geen eigen code nodig heeft en zonder JavaScript nog steeds als gewone textarea werkt. Het optionele event OnChange stuurt de tekst tijdens het typen naar de server.

Componentklasse

TsgcHTMLComponent_CodeEditor, een code-editor waarvan de tekst een verzonden formulierveld is

Rendert

Een CodeMirror 6-editor boven een <textarea>. De bibliotheek is ingebed in de componentresources en wordt door de engine geleverd als /codemirror.min.js, zonder CDN

Talen

Delphi, C++ Builder, .NET

Een SQL-editor in een formulier, JSON gecontroleerd op de server

SQLSchema geeft de aanvulling de tabellen en kolommen van je database. Bij het verzenden leest GetValueFromRequest de tekst van de editor en controleert ValidateJSONValue de JSON voordat je die opslaat.

uses
  sgcHTML_Component_CodeEditor;

// een SQL-editor in een formulier
oSQL := TsgcHTMLComponent_CodeEditor.Create(Self);
oSQL.Name := 'query';
oSQL.Language := celSQL;
oSQL.SQLDialect := cesPostgreSQL;
oSQL.SQLSchema.Add('customers=id,name,email,country');
oSQL.SQLSchema.Add('orders=id,customer_id,total,created_at');
oSQL.Placeholder := 'SELECT ...';
oSQL.CSSHeight := '240px';
oSQL.Required := True;
sHtml := '<form method="post" action="/report">' + oSQL.HTML +
  '<button type="submit" class="btn btn-primary mt-2">Run</button></form>';

// een JSON-instellingeneditor die met de tekst meegroeit
oSettings := TsgcHTMLComponent_CodeEditor.Create(Self);
oSettings.Name := 'settings';
oSettings.Language := celJSON;
oSettings.CSSHeight := 'auto';
oSettings.CSSMaxHeight := '400px';
oSettings.Value := LoadSettings;

// de post van het instellingenformulier
procedure TForm1.SaveSettingsPost(const aParams: TStrings; var aResponse: string);
var
  vJSON, vError: string;
begin
  vJSON := oSettings.GetValueFromRequest(aParams);
  if oSettings.ValidateJSONValue(vJSON, vError) then
  begin
    SaveSettings(vJSON);
    aResponse := '<div class="alert alert-success">Saved</div>';
  end
  else
    aResponse := '<div class="alert alert-danger">' + sgcHTMLEncode(vError) + '</div>';
end;
@* een SQL-editor en een JSON-editor in één formulier *@
<form method="post">
  <label for="query_input" class="form-label">Query</label>
  <sgc-code-editor name="query" language="sql" sql-dialect="postgresql"
                   sql-schema="customers=id,name,email;orders=id,customer_id,total"
                   value="@Model.Query" css-height="240px" required="true" />
  <sgc-code-editor name="settings" language="json" css-height="auto"
                   css-max-height="400px" value="@Model.Settings"
                   on-change="Model.SettingsChanged" />
  <button type="submit" class="btn btn-primary mt-2">Save</button>
</form>
using esegece.sgcWebSockets;

// een SQL-editor in een formulier
var sql = new TsgcHTMLComponent_CodeEditor();
sql.Name = "query";
sql.Language = TsgcHTMLCodeEditorLanguage.celSQL;
sql.SQLDialect = TsgcHTMLCodeEditorSQLDialect.cesPostgreSQL;
sql.SQLSchema.Add("customers=id,name,email,country");
sql.SQLSchema.Add("orders=id,customer_id,total,created_at");
sql.CSSHeight = "240px";
sql.Required = true;

// een JSON-instellingeneditor die met de tekst meegroeit
var settings = new TsgcHTMLComponent_CodeEditor();
settings.Name = "settings";
settings.Language = TsgcHTMLCodeEditorLanguage.celJSON;
settings.CSSHeight = "auto";
settings.CSSMaxHeight = "400px";
settings.Value = LoadSettings();

// de post van het instellingenformulier
string SaveSettingsPost(IReadOnlyList<string> fields)
{
    string json = settings.GetValueFromRequest(fields);
    if (settings.ValidateJSONValue(json, out string error))
    {
        SaveSettings(json);
        return "<div class=\"alert alert-success\">Saved</div>";
    }
    return "<div class=\"alert alert-danger\">" + WebUtility.HtmlEncode(error) + "</div>";
}

Wat je gebruikers krijgen

De editor van een desktop-IDE in een webpagina, en een veld dat je formulieren zonder eigen code verzenden.

Tien talen

Language kiest SQL, JSON, JavaScript, HTML met ingebedde CSS en JavaScript, CSS, XML, Markdown, Python, Pascal of gewone tekst. Elke taal wordt gemarkeerd, SQL voegt aanvulling toe en JSON een syntaxiscontrole.

SQL-aanvulling en dialecten

SQLDialect kiest de sleutelwoorden, typen, functies en identifier-quoting van standaard-SQL, PostgreSQL, MySQL, Microsoft SQL Server (T-SQL) of SQLite. SQLSchema somt je tabellen en kolommen op, en SQLSchemaGrid voegt de kolommen van een Grid toe als nog een tabel. Typ een tabelnaam en een punt om de kolommen te zien, of druk op Ctrl+spatie.

JSON-syntaxiscontrole

Met ValidateJSON markeert de editor JSON-syntaxisfouten tijdens het typen, en de foutenlijst vertelt wat er mis is. Op de server controleert ValidateJSONValue de verzonden tekst en geeft de fout terug, zodat een kapot instellingenbestand nooit je opslag bereikt.

Zoeken, vervangen en naar regel gaan

Ctrl+F opent het paneel voor zoeken en vervangen bovenaan de editor, met de opties hoofdlettergevoelig, reguliere expressie en heel woord, vervangen en alles vervangen. F3 en Shift+F3 vinden de volgende en de vorige treffer, en Ctrl+Alt+G gaat naar een regel.

Vouwen en bewerken

Regelnummers, een gemarkeerde actieve regel en een vouwgoot, elk aan of uit te zetten met LineNumbers, HighlightActiveLine en FoldGutter. Ctrl+Shift+[ en Ctrl+Shift+] vouwen en ontvouwen het blok bij de cursor, Tab springt TabSize spaties in, en Ctrl+Z en Ctrl+Y maken ongedaan en voeren opnieuw uit. WordWrap breekt lange regels af.

Werkt in elk formulier

De editor kopieert elke wijziging naar zijn textarea en activeert een input-event, zodat een formulier de huidige tekst verzendt en formulierbibliotheken de wijziging zien. Een klik op zijn label zet de focus in de editor. Met Required verzenden de browser en de validatie van een Form het formulier niet zolang de editor leeg is.

Licht en donker

Theme cetAuto volgt het data-bs-theme van de pagina, met het One Dark-thema van CodeMirror wanneer het donker is, en kleurt meteen om wanneer het thema wisselt. cetLight en cetDark leggen de kleuren vast. CSSHeight stelt een vaste hoogte in, of auto om mee te groeien met de tekst tussen CSSMinHeight en CSSMaxHeight.

Toegankelijkheid

De textarea en het bewerkingsgebied delen de toegankelijke naam uit AriaLabel, of Code-editor uit de locale, en melden alleen-lezen en verplicht. In de editor springt Tab in, dus Esc en dan Tab verplaatst de focus naar buiten. Op macOS neemt Cmd de plaats van Ctrl in.

Belangrijkste eigenschappen, methoden en gebeurtenissen

De leden die je het vaakst gebruikt.

Waarde en het verzonden veld

Value is de tekst van de editor. De textarea wordt verzonden onder FieldName, anders onder de Name van het component, anders onder code (GetFieldName). Op de server geeft GetValueFromRequest de verzonden tekst terug en stelt LoadFromRequest daaruit Value in. Een formulierpost verstuurt de regeleinden als CRLF, de regel van de browsers voor een textarea.

OnChange

OnChange(Sender, aValue, aResponse) ontvangt de tekst ChangeDelay ms (standaard 500) nadat de gebruiker stopt met typen, via de componentevents van de HTMXEngine, of van je eigen route met ActionURL en DispatchComponentEvent. De browser verstuurt alleen zolang de handler is toegewezen en de editor niet ReadOnly is, en htmx wisselt de HTML in die je teruggeeft wanneer de elementen zijn gemarkeerd met hx-swap-oob="true".

JavaScript-API

window.sgcHTMLCodeEditor biedt get(id), setValue(id, text), focus(id) en scan(node). Editors in inhoud die htmx invoegt worden gemaakt, en editors die htmx verwijdert worden vernietigd, zonder eigen code.

Eén bibliotheek per pagina

CodeMirror 6 is ingebed in de componentresources en wordt door de engine geleverd als /codemirror.min.js. De browser laadt het één keer per pagina, alleen op pagina's met een editor, hoeveel editors ze ook hebben. Als het niet kan laden, blijft elke editor van de pagina een gewone textarea en verzendt het formulier hem nog steeds. CodeMirror valt onder de MIT-licentie.

Lokalisatie

Het paneel voor zoeken en vervangen, de prompt Ga naar regel, de vouwmarkeringen, de aanvullijst en de JSON-fouten halen hun teksten uit de locale van de bibliotheek, in de 17 talen die ze meelevert.

Grenzen

OnChange verstuurt de hele tekst via het servereventeindpunt, waarvan de bodylimiet 64 KB is. Gebruik het voor kleine teksten en lees grote uit de formulierpost. Eén component bedient elke gebruiker: lees de verzonden tekst met GetValueFromRequest en wijzig het component niet in OnChange.

ASP.NET Core

In een Razor-view rendert de Tag Helper <sgc-code-editor> de editor. De eerste render maakt één component per engine en naam, en elke render stelt de eigenschappen opnieuw in vanuit de attributen. name is verplicht, en de Tag Helper heeft geen attribuut voor SQLSchemaGrid: som de kolommen van het grid op in sql-schema.

De demo

Demos\60.HTML\01.RunTime\30.CodeEditor is de sgc Admin Console, een server op poort 8132: een SQL-console met schema-aanvulling die queries op de server in een Grid uitvoert, JSON-instellingen die op de server worden gevalideerd en live in elke browser worden toegepast, en een alleen-lezen snippetviewer. De designtime-, Lazarus- en .NET-versies spiegelen het.

Blijf verkennen

Online proberenBekijk het in de demo Code-editor, live draaiend op de eSeGeCe-demoserver.
Online helpVolledige API-referentie en gebruikshandleiding voor dit component.
Rich Editor-componentDe WYSIWYG-editor voor opgemaakte tekst, op dezelfde manier met het formulier verzonden.
Alle sgcHTML-componentenBlader door de volledige functiematrix van 80+ componenten.
Download gratis proefversieDe proefversie van 30 dagen bevat de 60.HTML-demoprojecten.
PrijzenSingle-, Team- en Site-licenties met volledige broncode.
De beste deal: All-AccessElk eSeGeCe-product, inclusief Premium-ondersteuning, vanaf €1,059 per jaar.
Bekijk de All-Access-prijzen

Klaar om te beginnen?

Download de gratis proefversie en begin met het bouwen van web-UI's in Delphi, C++ Builder en .NET.