Code Editor

TsgcHTMLComponent_CodeEditor: un editor di codice per pagine web basato su CodeMirror 6. Evidenzia SQL, JSON, JavaScript, HTML, CSS, XML, Markdown, Python e Pascal, riduce i blocchi, trova e sostituisce, completa SQL con le tabelle e le colonne del tuo schema e segnala gli errori JSON mentre si digita. Il suo testo viene inviato con il modulo come una textarea, in Delphi, C++ Builder e .NET.

TsgcHTMLComponent_CodeEditor

Imposta il Language e inserisci il suo HTML dentro un modulo. Il testo vive in una <textarea> che il modulo invia come qualsiasi altro campo, quindi l'editor non richiede codice proprio e funziona comunque come una textarea semplice senza JavaScript. L'evento facoltativo OnChange invia il testo al server mentre l'utente digita.

Classe del componente

TsgcHTMLComponent_CodeEditor, un editor di codice il cui testo è un campo di modulo inviato

Rendering

Un editor CodeMirror 6 sopra una <textarea>. La libreria è incorporata nelle risorse del componente e servita dal motore come /codemirror.min.js, senza CDN

Famiglia

Moduli e Input

Linguaggi

Delphi, C++ Builder, .NET

Un editor SQL in un modulo, JSON controllato sul server

SQLSchema fornisce al completamento le tabelle e le colonne del tuo database. All'invio, GetValueFromRequest legge il testo dell'editor e ValidateJSONValue controlla il JSON prima che lo memorizzi.

uses
  sgcHTML_Component_CodeEditor;

// un editor SQL in un modulo
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>';

// un editor di impostazioni JSON che cresce con il testo
oSettings := TsgcHTMLComponent_CodeEditor.Create(Self);
oSettings.Name := 'settings';
oSettings.Language := celJSON;
oSettings.CSSHeight := 'auto';
oSettings.CSSMaxHeight := '400px';
oSettings.Value := LoadSettings;

// l'invio del modulo delle impostazioni
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;
@* un editor SQL e un editor JSON in un solo modulo *@
<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;

// un editor SQL in un modulo
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;

// un editor di impostazioni JSON che cresce con il testo
var settings = new TsgcHTMLComponent_CodeEditor();
settings.Name = "settings";
settings.Language = TsgcHTMLCodeEditorLanguage.celJSON;
settings.CSSHeight = "auto";
settings.CSSMaxHeight = "400px";
settings.Value = LoadSettings();

// l'invio del modulo delle impostazioni
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>";
}

Cosa ottengono i tuoi utenti

L'editor di un IDE desktop dentro una pagina web, e un campo che i tuoi moduli inviano senza codice proprio.

Dieci linguaggi

Language seleziona SQL, JSON, JavaScript, HTML con il suo CSS e JavaScript incorporati, CSS, XML, Markdown, Python, Pascal o testo semplice. Ogni linguaggio è evidenziato, SQL aggiunge il completamento e JSON aggiunge un controllo della sintassi.

Completamento SQL e dialetti

SQLDialect seleziona le parole chiave, i tipi, le funzioni e la quotatura degli identificatori di SQL standard, PostgreSQL, MySQL, Microsoft SQL Server (T-SQL) o SQLite. SQLSchema elenca le tue tabelle e colonne, e SQLSchemaGrid aggiunge le colonne di un Grid come una tabella in più. Digita un nome di tabella e un punto per vederne le colonne, oppure premi Ctrl+Spazio.

Controllo della sintassi JSON

Con ValidateJSON l'editor segnala gli errori di sintassi JSON mentre l'utente digita, e l'elenco degli errori dice cosa non va. Sul server, ValidateJSONValue controlla il testo inviato e restituisce l'errore, così un file di impostazioni rotto non arriva mai al tuo archivio.

Trova, sostituisci e vai alla riga

Ctrl+F apre il pannello trova e sostituisci nella parte alta dell'editor, con le opzioni maiuscole/minuscole, espressione regolare e parola intera, sostituisci e sostituisci tutto. F3 e Maiusc+F3 trovano la corrispondenza successiva e precedente, e Ctrl+Alt+G va a una riga.

Riduzione e modifica

Numeri di riga, una riga attiva evidenziata e una barra di riduzione, ciascuno attivato o disattivato con LineNumbers, HighlightActiveLine e FoldGutter. Ctrl+Maiusc+[ e Ctrl+Maiusc+] riducono ed espandono il blocco al cursore, Tab rientra di TabSize spazi e Ctrl+Z e Ctrl+Y annullano e ripetono. WordWrap manda a capo le righe lunghe.

Funziona in qualsiasi modulo

L'editor copia ogni modifica nella sua textarea e lancia un evento input, così un modulo invia il testo corrente e le librerie di moduli vedono la modifica. Un clic sulla sua etichetta sposta il focus nell'editor. Con Required il browser, e la validazione di un Form, non inviano il modulo finché l'editor è vuoto.

Chiaro e scuro

Theme cetAuto segue il data-bs-theme della pagina, con il tema One Dark di CodeMirror quando è scuro, e cambia i colori subito quando il tema cambia. cetLight e cetDark fissano i colori. CSSHeight imposta un'altezza fissa, oppure auto per crescere con il testo tra CSSMinHeight e CSSMaxHeight.

Accessibilità

La textarea e l'area di modifica condividono il nome accessibile di AriaLabel, oppure Editor di codice dalla localizzazione, e segnalano sola lettura e obbligatorio. Dentro l'editor Tab rientra, quindi Esc e poi Tab sposta il focus fuori. Su macOS Cmd prende il posto di Ctrl.

Proprietà, metodi ed eventi principali

I membri che usi più spesso.

Value e il campo inviato

Value è il testo dell'editor. La textarea viene inviata sotto FieldName, altrimenti sotto il Name del componente, altrimenti sotto code (GetFieldName). Sul server GetValueFromRequest restituisce il testo inviato e LoadFromRequest imposta Value a partire da esso. L'invio di un modulo manda gli a capo come CRLF, la regola dei browser per una textarea.

OnChange

OnChange(Sender, aValue, aResponse) riceve il testo ChangeDelay ms (500 di default) dopo che l'utente smette di digitare, tramite gli eventi dei componenti dell'HTMXEngine, o della tua route con ActionURL e DispatchComponentEvent. Il browser invia solo finché il gestore è assegnato e l'editor non è ReadOnly, e htmx sostituisce l'HTML che restituisci quando i suoi elementi sono marcati con hx-swap-oob="true".

API JavaScript

window.sgcHTMLCodeEditor offre get(id), setValue(id, text), focus(id) e scan(node). Gli editor nei contenuti che htmx sostituisce vengono creati, e gli editor che htmx rimuove vengono distrutti, senza codice proprio.

Una libreria per pagina

CodeMirror 6 è incorporato nelle risorse del componente e servito dal motore come /codemirror.min.js. Il browser lo carica una volta per pagina, solo nelle pagine che hanno un editor, per quanti editor abbiano. Quando non può caricarsi, ogni editor della pagina resta una textarea semplice e il modulo la invia comunque. CodeMirror è rilasciato con licenza MIT.

Localizzazione

Il pannello trova e sostituisci, il prompt vai alla riga, i marcatori di riduzione, l'elenco di completamento e gli errori JSON prendono i testi dalla localizzazione della libreria, nelle 17 lingue che include.

Limiti

OnChange invia l'intero testo tramite l'endpoint degli eventi server, il cui limite del corpo è 64 KB. Usalo per testi piccoli e leggi quelli grandi dall'invio del modulo. Un solo componente serve ogni utente: leggi il testo inviato con GetValueFromRequest e non modificare il componente in OnChange.

ASP.NET Core

In una vista Razor il Tag Helper <sgc-code-editor> renderizza l'editor. Il primo rendering crea un componente per motore e nome, e ogni rendering reimposta le sue proprietà dagli attributi. name è obbligatorio, e il Tag Helper non ha un attributo per SQLSchemaGrid: elenca le colonne del grid in sql-schema.

La demo

Demos\60.HTML\01.RunTime\30.CodeEditor è la sgc Admin Console, un server sulla porta 8132: una console SQL con completamento dello schema che esegue query sul server in un Grid, impostazioni JSON validate sul server e applicate in tempo reale in ogni browser, e un visualizzatore di snippet in sola lettura. Le versioni design time, Lazarus e .NET lo replicano.

Continua a esplorare

Provalo onlineGuardalo nella demo Editor di codice, in esecuzione dal vivo sul server demo di eSeGeCe.
Guida in lineaRiferimento API completo e guida all'uso di questo componente.
Componente Rich EditorL'editor WYSIWYG per testo formattato, inviato con il modulo allo stesso modo.
Tutti i componenti sgcHTMLEsplora la matrice completa delle funzionalità di oltre 80 componenti.
Scarica la Prova GratuitaLa prova di 30 giorni include i progetti demo 60.HTML.
PrezziLicenze Single, Team e Site con codice sorgente completo.
La scelta più conveniente: All-AccessTutti i prodotti eSeGeCe, con Supporto Premium incluso, a partire da €1,059/anno.
Vedi i prezzi All-Access

Pronto a Iniziare?

Scarica la versione di prova gratuita e inizia a creare interfacce web in Delphi, C++ Builder e .NET.