Code Editor

TsgcHTMLComponent_CodeEditor: CodeMirror 6 üzerine kurulu, web sayfaları için bir kod düzenleyici. SQL, JSON, JavaScript, HTML, CSS, XML, Markdown, Python ve Pascal'ı vurgular, blokları daraltır, bulur ve değiştirir, SQL'i şemanızın tablo ve sütunlarıyla tamamlar ve JSON hatalarını siz yazarken işaretler. Metni bir textarea gibi formla birlikte gönderilir, Delphi, C++ Builder ve .NET ile.

TsgcHTMLComponent_CodeEditor

Language değerini ayarlayın ve HTML çıktısını bir formun içine koyun. Metin, formun diğer alanlar gibi gönderdiği bir <textarea> içinde yaşar, bu yüzden düzenleyici kendi koduna ihtiyaç duymaz ve JavaScript olmadan da düz bir textarea olarak çalışır. İsteğe bağlı OnChange olayı, kullanıcı yazarken metni sunucuya gönderir.

Bileşen sınıfı

TsgcHTMLComponent_CodeEditor, metni gönderilen bir form alanı olan bir kod düzenleyici

İşler

Bir <textarea> üzerinde CodeMirror 6 düzenleyici. Kitaplık bileşen kaynaklarına gömülüdür ve motor tarafından /codemirror.min.js olarak sunulur, CDN yoktur

Diller

Delphi, C++ Builder, .NET

Bir formda SQL düzenleyici, sunucuda denetlenen JSON

SQLSchema tamamlamaya veritabanınızın tablo ve sütunlarını verir. Gönderimde GetValueFromRequest düzenleyicinin metnini okur ve ValidateJSONValue siz saklamadan önce JSON'u denetler.

uses
  sgcHTML_Component_CodeEditor;

// bir formda SQL düzenleyici
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>';

// metinle birlikte büyüyen bir JSON ayar düzenleyici
oSettings := TsgcHTMLComponent_CodeEditor.Create(Self);
oSettings.Name := 'settings';
oSettings.Language := celJSON;
oSettings.CSSHeight := 'auto';
oSettings.CSSMaxHeight := '400px';
oSettings.Value := LoadSettings;

// ayarlar formunun gönderimi
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;
@* tek formda bir SQL düzenleyici ve bir JSON düzenleyici *@
<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;

// bir formda SQL düzenleyici
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;

// metinle birlikte büyüyen bir JSON ayar düzenleyici
var settings = new TsgcHTMLComponent_CodeEditor();
settings.Name = "settings";
settings.Language = TsgcHTMLCodeEditorLanguage.celJSON;
settings.CSSHeight = "auto";
settings.CSSMaxHeight = "400px";
settings.Value = LoadSettings();

// ayarlar formunun gönderimi
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>";
}

Kullanıcılarınızın elde ettikleri

Bir masaüstü IDE'nin düzenleyicisi bir web sayfasının içinde ve formlarınızın kendi kodu olmadan gönderdiği bir alan.

On dil

Language SQL, JSON, JavaScript, gömülü CSS ve JavaScript içeren HTML, CSS, XML, Markdown, Python, Pascal veya düz metin seçer. Her dil vurgulanır, SQL tamamlama ekler ve JSON bir sözdizimi denetimi ekler.

SQL tamamlama ve lehçeler

SQLDialect, Standard SQL, PostgreSQL, MySQL, Microsoft SQL Server (T-SQL) veya SQLite için anahtar sözcükleri, türleri, işlevleri ve tanımlayıcı tırnaklamayı seçer. SQLSchema tablolarınızı ve sütunlarınızı listeler, SQLSchemaGrid ise bir Grid'in sütunlarını bir tablo daha olarak ekler. Sütunlarını görmek için bir tablo adı ve nokta yazın ya da Ctrl+Boşluk tuşlarına basın.

JSON sözdizimi denetimi

ValidateJSON ile düzenleyici, kullanıcı yazarken JSON sözdizimi hatalarını işaretler ve hata listesi neyin yanlış olduğunu söyler. Sunucuda ValidateJSONValue gönderilen metni denetler ve hatayı döndürür, böylece bozuk bir ayar dosyası deponuza asla ulaşmaz.

Bul, değiştir ve satıra git

Ctrl+F, düzenleyicinin üstünde büyük/küçük harf, düzenli ifade ve tam sözcük seçenekleri, değiştir ve tümünü değiştir ile bul ve değiştir panelini açar. F3 ve Shift+F3 sonraki ve önceki eşleşmeyi bulur, Ctrl+Alt+G bir satıra gider.

Daraltma ve düzenleme

Satır numaraları, vurgulanmış etkin satır ve bir daraltma oluğu; her biri LineNumbers, HighlightActiveLine ve FoldGutter ile açılır veya kapatılır. Ctrl+Shift+[ ve Ctrl+Shift+] imlecin bulunduğu bloğu daraltır ve genişletir, Tab TabSize boşluk girinti verir, Ctrl+Z ve Ctrl+Y geri alır ve yineler. WordWrap uzun satırları kaydırır.

Her formda çalışır

Düzenleyici her değişikliği textarea alanına kopyalar ve bir input olayı tetikler, böylece bir form geçerli metni gönderir ve form kitaplıkları değişikliği görür. Etiketine tıklamak odağı düzenleyiciye taşır. Required ile tarayıcı ve bir Form'un doğrulaması, düzenleyici boşken formu göndermez.

Açık ve koyu

Theme cetAuto sayfanın data-bs-theme değerini izler, koyu olduğunda CodeMirror'ın One Dark temasıyla, ve tema değiştiğinde hemen yeniden renklenir. cetLight ve cetDark renkleri sabitler. CSSHeight sabit bir yükseklik ayarlar ya da CSSMinHeight ile CSSMaxHeight arasında metinle birlikte büyümek için auto kullanır.

Erişilebilirlik

Textarea ve düzenleme alanı AriaLabel değerinin ya da yerel ayardaki Kod düzenleyici adının erişilebilir adını paylaşır ve salt okunur ile gerekli durumunu bildirir. Düzenleyicinin içinde Tab girinti verir, bu yüzden Esc ve ardından Tab odağı dışarı taşır. macOS'ta Ctrl yerine Cmd kullanılır.

Temel özellikler, yöntemler & olaylar

En sık başvuracağınız üyeler.

Value ve gönderilen alan

Value düzenleyicinin metnidir. Textarea FieldName altında gönderilir, yoksa bileşenin Name değeri altında, o da yoksa code altında (GetFieldName). Sunucuda GetValueFromRequest gönderilen metni döndürür ve LoadFromRequest Value değerini ondan ayarlar. Bir form gönderimi satır sonlarını CRLF olarak gönderir, bu tarayıcıların textarea kuralıdır.

OnChange

OnChange(Sender, aValue, aResponse), kullanıcı yazmayı bıraktıktan ChangeDelay ms (varsayılan 500) sonra, HTMXEngine bileşen olayları veya ActionURL ve DispatchComponentEvent ile kendi rotanız üzerinden metni alır. Tarayıcı yalnızca işleyici atandığında ve düzenleyici ReadOnly olmadığında gönderir ve htmx, öğeleri hx-swap-oob="true" ile işaretliyse döndürdüğünüz HTML'i değiştirir.

JavaScript API

window.sgcHTMLCodeEditor şunları sunar: get(id), setValue(id, text), focus(id) ve scan(node). htmx'in içeri aldığı içerikteki düzenleyiciler oluşturulur ve htmx'in kaldırdığı düzenleyiciler yok edilir, kendi kodunuz gerekmeden.

Sayfa başına bir kitaplık

CodeMirror 6 bileşen kaynaklarına gömülüdür ve motor tarafından /codemirror.min.js olarak sunulur. Tarayıcı bunu sayfa başına bir kez, yalnızca düzenleyicisi olan sayfalarda, kaç düzenleyici olursa olsun yükler. Yüklenemediğinde sayfanın her düzenleyicisi düz bir textarea olarak kalır ve form yine de onu gönderir. CodeMirror MIT Lisansı ile yayımlanmıştır.

Yerelleştirme

Bul ve değiştir paneli, satıra git istemi, daraltma işaretleri, tamamlama listesi ve JSON hataları metinlerini kitaplığın yerel ayarından, sunduğu 17 dilde alır.

Sınırlar

OnChange metnin tamamını, gövde sınırı 64 KB olan sunucu olayları uç noktası üzerinden gönderir. Küçük metinler için kullanın ve büyük olanları form gönderiminden okuyun. Tek bir bileşen her kullanıcıya hizmet verir: gönderilen metni GetValueFromRequest ile okuyun ve OnChange içinde bileşeni değiştirmeyin.

ASP.NET Core

Bir Razor görünümünde <sgc-code-editor> Tag Helper'ı düzenleyiciyi oluşturur. İlk oluşturma motor ve ad başına bir bileşen oluşturur ve her oluşturma özelliklerini niteliklerden yeniden ayarlar. name zorunludur ve Tag Helper'ın SQLSchemaGrid için niteliği yoktur: gridin sütunlarını sql-schema içinde listeleyin.

Demo

Demos\60.HTML\01.RunTime\30.CodeEditor, 8132 numaralı bağlantı noktasında bir sunucu olan sgc Admin Console'dur: şema tamamlamalı, sorguları sunucuda bir Grid'e çalıştıran bir SQL konsolu, sunucuda doğrulanan ve her tarayıcıda canlı uygulanan JSON ayarları ve salt okunur bir kod parçacığı görüntüleyicisi. Tasarım zamanı, Lazarus ve .NET sürümleri bunu yansıtır.

Keşfetmeye devam edin

Online DeneyinKod Düzenleyici demosunda görün, eSeGeCe demo sunucusunda canlı çalışıyor.
Çevrimiçi yardımBu bileşenin tam API başvurusu ve kullanım kılavuzu.
Rich Editor BileşeniBiçimlendirilmiş metin için, formla aynı şekilde gönderilen WYSIWYG düzenleyici.
Tüm sgcHTML Bileşenleri80'den fazla bileşenin tüm özellik matrisine göz atın.
Ücretsiz Deneme Sürümünü İndirin30 günlük deneme sürümü 60.HTML demo projelerini içerir.
FiyatlandırmaTam kaynak kodlu Single, Team ve Site lisansları.
En avantajlı seçenek: All-AccessTüm eSeGeCe ürünleri, Premium Destek dahil, yılda €1,059'dan itibaren.
All-Access fiyatlarına bakın

Başlamaya Hazır mısınız?

Ücretsiz deneme sürümünü indirin ve Delphi, C++ Builder ve .NET'te web arayüzleri oluşturmaya başlayın.