Code Editor

TsgcHTMLComponent_CodeEditor: ein Code-Editor für Webseiten auf Basis von CodeMirror 6. Er hebt SQL, JSON, JavaScript, HTML, CSS, XML, Markdown, Python und Pascal hervor, faltet Blöcke, sucht und ersetzt, vervollständigt SQL mit den Tabellen und Spalten Ihres Schemas und markiert JSON-Fehler während der Eingabe. Sein Text wird wie bei einer Textarea mit dem Formular gesendet, in Delphi, C++ Builder und .NET.

TsgcHTMLComponent_CodeEditor

Setzen Sie die Language und legen Sie sein HTML in ein Formular. Der Text liegt in einer <textarea>, die das Formular wie jedes andere Feld sendet, sodass der Editor keinen eigenen Code braucht und ohne JavaScript weiterhin als einfache Textarea funktioniert. Das optionale Ereignis OnChange sendet den Text während der Eingabe an den Server.

Komponentenklasse

TsgcHTMLComponent_CodeEditor, ein Code-Editor, dessen Text ein gesendetes Formularfeld ist

Rendert

Ein CodeMirror-6-Editor über einer <textarea>. Die Bibliothek ist in die Komponentenressourcen eingebettet und wird von der Engine als /codemirror.min.js ausgeliefert, ohne CDN

Sprachen

Delphi, C++ Builder, .NET

Ein SQL-Editor in einem Formular, JSON auf dem Server geprüft

SQLSchema gibt der Vervollständigung die Tabellen und Spalten Ihrer Datenbank. Beim Senden liest GetValueFromRequest den Text des Editors, und ValidateJSONValue prüft das JSON, bevor Sie es speichern.

uses
  sgcHTML_Component_CodeEditor;

// ein SQL-Editor in einem Formular
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>';

// ein JSON-Einstellungs-Editor, der mit dem Text wächst
oSettings := TsgcHTMLComponent_CodeEditor.Create(Self);
oSettings.Name := 'settings';
oSettings.Language := celJSON;
oSettings.CSSHeight := 'auto';
oSettings.CSSMaxHeight := '400px';
oSettings.Value := LoadSettings;

// der Post des Einstellungsformulars
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;
@* ein SQL-Editor und ein JSON-Editor in einem Formular *@
<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;

// ein SQL-Editor in einem Formular
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;

// ein JSON-Einstellungs-Editor, der mit dem Text wächst
var settings = new TsgcHTMLComponent_CodeEditor();
settings.Name = "settings";
settings.Language = TsgcHTMLCodeEditorLanguage.celJSON;
settings.CSSHeight = "auto";
settings.CSSMaxHeight = "400px";
settings.Value = LoadSettings();

// der Post des Einstellungsformulars
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>";
}

Was Ihre Benutzer bekommen

Der Editor einer Desktop-IDE in einer Webseite und ein Feld, das Ihre Formulare ohne eigenen Code senden.

Zehn Sprachen

Language wählt SQL, JSON, JavaScript, HTML mit eingebettetem CSS und JavaScript, CSS, XML, Markdown, Python, Pascal oder einfachen Text. Jede Sprache wird hervorgehoben, SQL ergänzt die Vervollständigung und JSON eine Syntaxprüfung.

SQL-Vervollständigung und Dialekte

SQLDialect wählt die Schlüsselwörter, Typen, Funktionen und das Identifier-Quoting von Standard-SQL, PostgreSQL, MySQL, Microsoft SQL Server (T-SQL) oder SQLite. SQLSchema listet Ihre Tabellen und Spalten auf, und SQLSchemaGrid fügt die Spalten eines Grids als eine weitere Tabelle hinzu. Geben Sie einen Tabellennamen und einen Punkt ein, um seine Spalten zu sehen, oder drücken Sie Strg+Leertaste.

JSON-Syntaxprüfung

Mit ValidateJSON markiert der Editor JSON-Syntaxfehler während der Eingabe, und die Fehlerliste sagt, was falsch ist. Auf dem Server prüft ValidateJSONValue den gesendeten Text und gibt den Fehler zurück, sodass eine defekte Einstellungsdatei nie Ihren Speicher erreicht.

Suchen, Ersetzen und Gehe zu Zeile

Strg+F öffnet das Such- und Ersetzen-Panel am oberen Rand des Editors, mit den Optionen Groß-/Kleinschreibung, regulärer Ausdruck und ganzes Wort, Ersetzen und Alle ersetzen. F3 und Umschalt+F3 finden den nächsten und den vorherigen Treffer, und Strg+Alt+G springt zu einer Zeile.

Falten und Bearbeiten

Zeilennummern, eine hervorgehobene aktive Zeile und eine Faltleiste, jeweils mit LineNumbers, HighlightActiveLine und FoldGutter ein- oder ausgeschaltet. Strg+Umschalt+[ und Strg+Umschalt+] falten und entfalten den Block am Cursor, Tab rückt um TabSize Leerzeichen ein, und Strg+Z und Strg+Y machen rückgängig und wiederholen. WordWrap bricht lange Zeilen um.

Funktioniert in jedem Formular

Der Editor kopiert jede Änderung in seine Textarea und löst ein input-Ereignis aus, sodass ein Formular den aktuellen Text sendet und Formularbibliotheken die Änderung sehen. Ein Klick auf sein Label setzt den Fokus in den Editor. Mit Required senden der Browser und die Validierung eines Forms das Formular nicht, solange der Editor leer ist.

Hell und dunkel

Theme cetAuto folgt dem data-bs-theme der Seite, mit dem One-Dark-Thema von CodeMirror, wenn sie dunkel ist, und färbt sofort um, wenn das Thema wechselt. cetLight und cetDark legen die Farben fest. CSSHeight setzt eine feste Höhe, oder auto, um mit dem Text zwischen CSSMinHeight und CSSMaxHeight zu wachsen.

Barrierefreiheit

Die Textarea und der Bearbeitungsbereich teilen sich den zugänglichen Namen aus AriaLabel oder Code-Editor aus dem Locale und melden schreibgeschützt und erforderlich. Im Editor rückt Tab ein, daher bewegt Esc und dann Tab den Fokus hinaus. Unter macOS ersetzt Cmd die Strg-Taste.

Wichtige Eigenschaften, Methoden & Ereignisse

Die Member, zu denen Sie am häufigsten greifen.

Wert und das gesendete Feld

Value ist der Text des Editors. Die Textarea wird unter FieldName gesendet, sonst unter dem Name der Komponente, sonst unter code (GetFieldName). Auf dem Server gibt GetValueFromRequest den gesendeten Text zurück, und LoadFromRequest setzt daraus Value. Ein Formular-Post sendet die Zeilenumbrüche als CRLF, die Regel der Browser für eine Textarea.

OnChange

OnChange(Sender, aValue, aResponse) erhält den Text ChangeDelay ms (standardmäßig 500) nachdem der Benutzer aufgehört hat zu tippen, über die Komponentenereignisse der HTMXEngine oder Ihrer eigenen Route mit ActionURL und DispatchComponentEvent. Der Browser sendet nur, solange der Handler zugewiesen und der Editor nicht ReadOnly ist, und htmx tauscht das HTML aus, das Sie zurückgeben, wenn seine Elemente mit hx-swap-oob="true" markiert sind.

JavaScript-API

window.sgcHTMLCodeEditor bietet get(id), setValue(id, text), focus(id) und scan(node). Editoren in Inhalt, den htmx einfügt, werden erstellt, und Editoren, die htmx entfernt, werden zerstört, ohne eigenen Code.

Eine Bibliothek pro Seite

CodeMirror 6 ist in die Komponentenressourcen eingebettet und wird von der Engine als /codemirror.min.js ausgeliefert. Der Browser lädt es einmal pro Seite, nur auf Seiten mit einem Editor, egal wie viele Editoren sie haben. Wenn es nicht geladen werden kann, bleibt jeder Editor der Seite eine einfache Textarea, und das Formular sendet sie weiterhin. CodeMirror steht unter der MIT-Lizenz.

Lokalisierung

Das Such- und Ersetzen-Panel, die Eingabeaufforderung Gehe zu Zeile, die Faltmarker, die Vervollständigungsliste und die JSON-Fehler beziehen ihre Texte aus dem Locale der Bibliothek, in den 17 Sprachen, die sie mitliefert.

Grenzen

OnChange sendet den gesamten Text über den Server-Ereignis-Endpunkt, dessen Body-Limit 64 KB beträgt. Verwenden Sie es für kleine Texte, und lesen Sie große aus dem Formular-Post. Eine Komponente bedient jeden Benutzer: Lesen Sie den gesendeten Text mit GetValueFromRequest und ändern Sie die Komponente nicht in OnChange.

ASP.NET Core

In einer Razor-View rendert der Tag Helper <sgc-code-editor> den Editor. Das erste Rendern erstellt eine Komponente pro Engine und Name, und jedes Rendern setzt ihre Eigenschaften erneut aus den Attributen. name ist erforderlich, und der Tag Helper hat kein Attribut für SQLSchemaGrid: Listen Sie die Spalten des Grids in sql-schema auf.

Die Demo

Demos\60.HTML\01.RunTime\30.CodeEditor ist die sgc Admin Console, ein Server auf Port 8132: eine SQL-Konsole mit Schema-Vervollständigung, die Abfragen auf dem Server in ein Grid ausführt, JSON-Einstellungen, die auf dem Server validiert und live in jedem Browser angewendet werden, und ein schreibgeschützter Snippet-Viewer. Die Designtime-, Lazarus- und .NET-Versionen spiegeln sie.

Weiter entdecken

Online ausprobierenSehen Sie es in der Demo Code-Editor, live auf dem eSeGeCe-Demoserver.
Online-HilfeVollständige API-Referenz und Verwendungshandbuch für diese Komponente.
Rich-Editor-KomponenteDer WYSIWYG-Editor für formatierten Text, auf dieselbe Weise mit dem Formular gesendet.
Alle sgcHTML-KomponentenDurchsuchen Sie die vollständige Funktionsmatrix von über 80 Komponenten.
Kostenlose Testversion herunterladenDie 30-Tage-Testversion enthält die 60.HTML-Demoprojekte.
PreiseSingle-, Team- und Site-Lizenzen mit vollständigem Quellcode.
Bestes Preis-Leistungs-Verhältnis: All-AccessAlle eSeGeCe-Produkte, inklusive Premium-Support, ab €1,059 pro Jahr.
All-Access-Preise ansehen

Bereit loszulegen?

Laden Sie die kostenlose Testversion herunter und beginnen Sie, Web-UIs in Delphi, C++ Builder und .NET zu erstellen.