Code Editor

TsgcHTMLComponent_CodeEditor: edytor kodu dla stron webowych oparty na CodeMirror 6. Podświetla SQL, JSON, JavaScript, HTML, CSS, XML, Markdown, Python i Pascal, zwija bloki, wyszukuje i zamienia, uzupełnia SQL tabelami i kolumnami Twojego schematu oraz oznacza błędy JSON podczas pisania. Jego tekst jest wysyłany z formularzem jak textarea, w Delphi, C++ Builder i .NET.

TsgcHTMLComponent_CodeEditor

Ustaw Language i umieść jego HTML wewnątrz formularza. Tekst znajduje się w <textarea>, który formularz wysyła jak każde inne pole, więc edytor nie potrzebuje własnego kodu i bez JavaScriptu nadal działa jak zwykły textarea. Opcjonalne zdarzenie OnChange wysyła tekst na serwer podczas pisania.

Klasa komponentu

TsgcHTMLComponent_CodeEditor, edytor kodu, którego tekst jest wysyłanym polem formularza

Renderuje

Edytor CodeMirror 6 nad <textarea>. Biblioteka jest wbudowana w zasoby komponentu i serwowana przez silnik jako /codemirror.min.js, bez CDN

Języki

Delphi, C++ Builder, .NET

Edytor SQL w formularzu, JSON sprawdzany na serwerze

SQLSchema daje uzupełnianiu tabele i kolumny Twojej bazy danych. Przy wysłaniu GetValueFromRequest odczytuje tekst edytora, a ValidateJSONValue sprawdza JSON, zanim go zapiszesz.

uses
  sgcHTML_Component_CodeEditor;

// edytor SQL w formularzu
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>';

// edytor ustawień JSON, który rośnie wraz z tekstem
oSettings := TsgcHTMLComponent_CodeEditor.Create(Self);
oSettings.Name := 'settings';
oSettings.Language := celJSON;
oSettings.CSSHeight := 'auto';
oSettings.CSSMaxHeight := '400px';
oSettings.Value := LoadSettings;

// wysłanie formularza ustawień
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;
@* edytor SQL i edytor JSON w jednym formularzu *@
<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;

// edytor SQL w formularzu
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;

// edytor ustawień JSON, który rośnie wraz z tekstem
var settings = new TsgcHTMLComponent_CodeEditor();
settings.Name = "settings";
settings.Language = TsgcHTMLCodeEditorLanguage.celJSON;
settings.CSSHeight = "auto";
settings.CSSMaxHeight = "400px";
settings.Value = LoadSettings();

// wysłanie formularza ustawień
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>";
}

Co dostają Twoi użytkownicy

Edytor z pulpitowego IDE wewnątrz strony webowej oraz pole, które Twoje formularze wysyłają bez własnego kodu.

Dziesięć języków

Language wybiera SQL, JSON, JavaScript, HTML z osadzonymi CSS i JavaScript, CSS, XML, Markdown, Python, Pascal lub zwykły tekst. Każdy język jest podświetlany, SQL dodaje uzupełnianie, a JSON dodaje kontrolę składni.

Uzupełnianie SQL i dialekty

SQLDialect wybiera słowa kluczowe, typy, funkcje i cytowanie identyfikatorów dla Standard SQL, PostgreSQL, MySQL, Microsoft SQL Server (T-SQL) lub SQLite. SQLSchema wymienia Twoje tabele i kolumny, a SQLSchemaGrid dodaje kolumny Grid jako jeszcze jedną tabelę. Wpisz nazwę tabeli i kropkę, aby zobaczyć jej kolumny, albo naciśnij Ctrl+Spacja.

Kontrola składni JSON

Z ValidateJSON edytor oznacza błędy składni JSON podczas pisania, a lista błędów mówi, co jest nie tak. Na serwerze ValidateJSONValue sprawdza wysłany tekst i zwraca błąd, więc uszkodzony plik ustawień nigdy nie trafia do Twojego magazynu.

Znajdź, zamień i przejdź do wiersza

Ctrl+F otwiera panel wyszukiwania i zamiany u góry edytora, z opcjami uwzględnienia wielkości liter, wyrażenia regularnego i całych słów, zamiany i zamiany wszystkiego. F3 i Shift+F3 znajdują następne i poprzednie dopasowanie, a Ctrl+Alt+G przechodzi do wiersza.

Zwijanie i edycja

Numery wierszy, podświetlony aktywny wiersz i rynna zwijania, każde włączane lub wyłączane przez LineNumbers, HighlightActiveLine i FoldGutter. Ctrl+Shift+[ i Ctrl+Shift+] zwijają i rozwijają blok przy kursorze, Tab wcina o TabSize spacji, a Ctrl+Z i Ctrl+Y cofają i ponawiają. WordWrap zawija długie wiersze.

Działa w każdym formularzu

Edytor kopiuje każdą zmianę do swojego textarea i wywołuje zdarzenie input, więc formularz wysyła bieżący tekst, a biblioteki formularzy widzą zmianę. Kliknięcie jego etykiety przenosi fokus do edytora. Z Required przeglądarka i walidacja Form nie wysyłają formularza, dopóki edytor jest pusty.

Jasny i ciemny

Theme cetAuto podąża za data-bs-theme strony, z motywem One Dark z CodeMirror, gdy jest ciemny, i natychmiast zmienia kolory przy przełączeniu motywu. cetLight i cetDark ustalają kolory na stałe. CSSHeight ustawia stałą wysokość albo auto, aby rosnąć wraz z tekstem między CSSMinHeight a CSSMaxHeight.

Dostępność

Textarea i obszar edycji mają wspólną dostępną nazwę z AriaLabel albo Edytor kodu z ustawień regionalnych oraz zgłaszają tylko do odczytu i wymagane. Wewnątrz edytora Tab wcina, więc Esc, a potem Tab, wyprowadza fokus na zewnątrz. W macOS Cmd zastępuje Ctrl.

Kluczowe właściwości, metody i zdarzenia

Składowe, po które sięgasz najczęściej.

Value i wysyłane pole

Value to tekst edytora. Textarea jest wysyłany pod FieldName, a w razie jego braku pod Name komponentu, a w razie jego braku pod code (GetFieldName). Na serwerze GetValueFromRequest zwraca wysłany tekst, a LoadFromRequest ustawia z niego Value. Wysłanie formularza przekazuje podziały wierszy jako CRLF, zgodnie z regułą przeglądarek dla textarea.

OnChange

OnChange(Sender, aValue, aResponse) otrzymuje tekst ChangeDelay ms (domyślnie 500) po tym, jak użytkownik przestanie pisać, przez zdarzenia komponentów HTMXEngine albo własnej trasy z ActionURL i DispatchComponentEvent. Przeglądarka wysyła tylko wtedy, gdy procedura obsługi jest przypisana, a edytor nie jest ReadOnly, a htmx podmienia zwrócony HTML, gdy jego elementy są oznaczone hx-swap-oob="true".

API JavaScript

window.sgcHTMLCodeEditor oferuje get(id), setValue(id, text), focus(id) i scan(node). Edytory w treści podmienianej przez htmx są tworzone, a edytory usuwane przez htmx są niszczone, bez własnego kodu.

Jedna biblioteka na stronę

CodeMirror 6 jest wbudowany w zasoby komponentu i serwowany przez silnik jako /codemirror.min.js. Przeglądarka ładuje go raz na stronę, tylko na stronach z edytorem, bez względu na liczbę edytorów. Gdy nie może się załadować, każdy edytor strony pozostaje zwykłym textarea i formularz nadal go wysyła. CodeMirror jest wydany na licencji MIT.

Lokalizacja

Panel wyszukiwania i zamiany, monit przejścia do wiersza, znaczniki zwijania, lista uzupełnień i błędy JSON biorą teksty z ustawień regionalnych biblioteki, w 17 językach, w których jest dostarczana.

Ograniczenia

OnChange wysyła cały tekst przez punkt końcowy zdarzeń serwera, którego limit treści wynosi 64 KB. Używaj go do małych tekstów, a duże odczytuj z wysłanego formularza. Jeden komponent obsługuje każdego użytkownika: odczytuj wysłany tekst przez GetValueFromRequest i nie zmieniaj komponentu w OnChange.

ASP.NET Core

W widoku Razor Tag Helper <sgc-code-editor> renderuje edytor. Pierwsze renderowanie tworzy jeden komponent na silnik i nazwę, a każde renderowanie ponownie ustawia jego właściwości z atrybutów. name jest wymagane, a Tag Helper nie ma atrybutu dla SQLSchemaGrid: wymień kolumny siatki w sql-schema.

Demo

Demos\60.HTML\01.RunTime\30.CodeEditor to sgc Admin Console, serwer na porcie 8132: konsola SQL z uzupełnianiem schematu, która wykonuje zapytania na serwerze do Grid, ustawienia JSON walidowane na serwerze i stosowane na żywo w każdej przeglądarce oraz przeglądarka fragmentów tylko do odczytu. Wersje design time, Lazarus i .NET są jego odpowiednikami.

Odkrywaj dalej

Wypróbuj onlineZobacz to w demie Edytor kodu, działającym na żywo na serwerze demo eSeGeCe.
Pomoc onlinePełna dokumentacja API i przewodnik użytkowania tego komponentu.
Komponent Rich EditorEdytor WYSIWYG dla tekstu sformatowanego, wysyłany z formularzem w ten sam sposób.
Wszystkie komponenty sgcHTMLPrzejrzyj pełną matrycę funkcji 80+ komponentów.
Pobierz bezpłatną wersję próbną30-dniowa wersja próbna zawiera projekty demonstracyjne 60.HTML.
CennikLicencje Single, Team i Site z pełnym kodem źródłowym.
Najkorzystniejsza oferta: All-AccessWszystkie produkty eSeGeCe, ze wsparciem Premium w cenie, już od €1,059 rocznie.
Zobacz cennik All-Access

Gotowy, aby zacząć?

Pobierz bezpłatną wersję próbną i zacznij budować interfejsy webowe w Delphi, C++ Builder i .NET.