Code Editor

TsgcHTMLComponent_CodeEditor: CodeMirror 6 기반의 웹 페이지용 코드 편집기입니다. SQL, JSON, JavaScript, HTML, CSS, XML, Markdown, Python, Pascal을 강조 표시하고, 블록을 접고, 찾아 바꾸며, 스키마의 테이블과 열로 SQL을 자동 완성하고, 입력하는 동안 JSON 오류를 표시합니다. 텍스트는 textarea처럼 폼과 함께 전송됩니다. Delphi, C++ Builder, .NET에서 사용할 수 있습니다.

TsgcHTMLComponent_CodeEditor

Language를 설정하고 그 HTML을 폼 안에 넣으십시오. 텍스트는 폼이 다른 필드처럼 전송하는 <textarea>에 들어 있으므로, 편집기에는 별도의 코드가 필요 없고 JavaScript 없이도 일반 textarea로 동작합니다. 선택 사항인 OnChange 이벤트는 사용자가 입력하는 동안 텍스트를 서버로 보냅니다.

컴포넌트 클래스

TsgcHTMLComponent_CodeEditor, 텍스트가 폼에서 전송되는 필드인 코드 편집기

렌더링

<textarea> 위의 CodeMirror 6 편집기입니다. 라이브러리는 컴포넌트 리소스에 내장되어 엔진이 /codemirror.min.js로 제공하며 CDN이 필요 없습니다

패밀리

폼 & 입력

언어

Delphi, C++ Builder, .NET

폼 안의 SQL 편집기와 서버에서 검사하는 JSON

SQLSchema는 자동 완성에 데이터베이스의 테이블과 열을 제공합니다. 전송 시 GetValueFromRequest가 편집기의 텍스트를 읽고, ValidateJSONValue가 저장하기 전에 JSON을 검사합니다.

uses
  sgcHTML_Component_CodeEditor;

// 폼 안의 SQL 편집기
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>';

// 텍스트에 따라 늘어나는 JSON 설정 편집기
oSettings := TsgcHTMLComponent_CodeEditor.Create(Self);
oSettings.Name := 'settings';
oSettings.Language := celJSON;
oSettings.CSSHeight := 'auto';
oSettings.CSSMaxHeight := '400px';
oSettings.Value := LoadSettings;

// 설정 폼의 전송
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;
@* 하나의 폼 안에 SQL 편집기와 JSON 편집기 *@
<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;

// 폼 안의 SQL 편집기
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;

// 텍스트에 따라 늘어나는 JSON 설정 편집기
var settings = new TsgcHTMLComponent_CodeEditor();
settings.Name = "settings";
settings.Language = TsgcHTMLCodeEditorLanguage.celJSON;
settings.CSSHeight = "auto";
settings.CSSMaxHeight = "400px";
settings.Value = LoadSettings();

// 설정 폼의 전송
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>";
}

사용자가 얻는 것

데스크톱 IDE의 편집기를 웹 페이지 안에서 사용하며, 폼이 별도의 코드 없이 전송하는 필드입니다.

열 가지 언어

Language는 SQL, JSON, JavaScript, 내장 CSS와 JavaScript가 있는 HTML, CSS, XML, Markdown, Python, Pascal 또는 일반 텍스트를 고릅니다. 모든 언어가 강조 표시되며, SQL에는 자동 완성이, JSON에는 구문 검사가 추가됩니다.

SQL 자동 완성과 방언

SQLDialect는 표준 SQL, PostgreSQL, MySQL, Microsoft SQL Server(T-SQL), SQLite의 키워드, 형식, 함수, 식별자 따옴표를 고릅니다. SQLSchema는 테이블과 열을 나열하고, SQLSchemaGrid는 Grid의 열을 또 하나의 테이블로 추가합니다. 테이블 이름과 점을 입력하면 그 열이 표시되며, Ctrl+Space 키를 눌러도 됩니다.

JSON 구문 검사

ValidateJSON을 사용하면 편집기는 사용자가 입력하는 동안 JSON 구문 오류를 표시하고, 오류 목록은 무엇이 잘못되었는지 알려 줍니다. 서버에서는 ValidateJSONValue가 전송된 텍스트를 검사하고 오류를 반환하므로, 잘못된 설정 파일이 저장소에 들어가는 일이 없습니다.

찾기, 바꾸기, 줄로 이동

Ctrl+F는 편집기 위쪽에 찾기 및 바꾸기 패널을 열며, 대소문자 구분, 정규식, 단어 단위 옵션과 바꾸기, 모두 바꾸기가 있습니다. F3과 Shift+F3은 다음 및 이전 일치 항목을 찾고, Ctrl+Alt+G는 줄로 이동합니다.

접기와 편집

줄 번호, 강조 표시된 현재 줄, 접기 여백은 각각 LineNumbers, HighlightActiveLine, FoldGutter로 켜거나 끕니다. Ctrl+Shift+[ 와 Ctrl+Shift+] 는 커서 위치의 블록을 접고 펼치며, Tab 키는 TabSize칸만큼 들여쓰고, Ctrl+Z와 Ctrl+Y는 실행 취소와 다시 실행입니다. WordWrap은 긴 줄을 줄바꿈합니다.

모든 폼에서 동작

편집기는 모든 변경 내용을 textarea에 복사하고 input 이벤트를 발생시키므로, 폼은 현재 텍스트를 전송하고 폼 라이브러리는 변경을 감지합니다. 레이블을 클릭하면 포커스가 편집기로 이동합니다. Required를 사용하면 편집기가 비어 있는 동안 브라우저와 Form의 유효성 검사가 폼을 전송하지 않습니다.

밝은 테마와 어두운 테마

Theme cetAuto는 페이지의 data-bs-theme를 따르며, 어두울 때는 CodeMirror의 One Dark 테마를 사용하고 테마가 바뀌면 즉시 색을 다시 입힙니다. cetLight와 cetDark는 색을 고정합니다. CSSHeight는 고정 높이를 설정하거나, auto로 두면 CSSMinHeight와 CSSMaxHeight 사이에서 텍스트에 맞춰 늘어납니다.

접근성

textarea와 편집 영역은 AriaLabel 또는 로캘의 코드 편집기라는 접근 가능한 이름을 공유하며, 읽기 전용과 필수 상태를 알립니다. 편집기 안에서 Tab 키는 들여쓰기를 하므로, Esc 다음에 Tab 키를 누르면 포커스가 밖으로 나갑니다. macOS에서는 Ctrl 대신 Cmd를 사용합니다.

주요 속성, 메서드 및 이벤트

가장 자주 사용하는 멤버입니다.

Value와 전송되는 필드

Value는 편집기의 텍스트입니다. textarea는 FieldName으로, 없으면 컴포넌트의 Name으로, 그것도 없으면 code(GetFieldName)로 전송됩니다. 서버에서 GetValueFromRequest는 전송된 텍스트를 반환하고 LoadFromRequest는 그 텍스트로 Value를 설정합니다. 폼 전송은 줄바꿈을 CRLF로 보내며, 이는 textarea에 대한 브라우저의 규칙입니다.

OnChange

OnChange(Sender, aValue, aResponse)는 사용자가 입력을 멈춘 뒤 ChangeDelay ms(기본값 500) 후에 HTMXEngine의 컴포넌트 이벤트 또는 ActionURL과 DispatchComponentEvent를 사용하는 사용자 고유의 라우트를 통해 텍스트를 받습니다. 브라우저는 핸들러가 지정되어 있고 편집기가 ReadOnly가 아닐 때만 전송하며, 반환한 HTML의 요소에 hx-swap-oob="true"가 표시되어 있으면 htmx가 교체합니다.

JavaScript API

window.sgcHTMLCodeEditor는 get(id), setValue(id, text), focus(id), scan(node)를 제공합니다. htmx가 교체해 넣은 콘텐츠의 편집기는 생성되고 htmx가 제거한 편집기는 파괴되며, 별도의 코드가 필요 없습니다.

페이지당 하나의 라이브러리

CodeMirror 6은 컴포넌트 리소스에 내장되어 엔진이 /codemirror.min.js로 제공합니다. 브라우저는 편집기가 있는 페이지에서만, 편집기가 몇 개이든 페이지당 한 번 로드합니다. 로드할 수 없으면 페이지의 모든 편집기는 일반 textarea로 남고 폼은 그대로 전송합니다. CodeMirror는 MIT 라이선스로 배포됩니다.

현지화

찾기 및 바꾸기 패널, 줄로 이동 프롬프트, 접기 표식, 자동 완성 목록, JSON 오류는 라이브러리가 제공하는 17개 언어의 로캘에서 텍스트를 가져옵니다.

제한 사항

OnChange는 전체 텍스트를 서버 이벤트 엔드포인트로 전송하며, 그 본문 한도는 64 KB입니다. 작은 텍스트에 사용하고, 큰 텍스트는 폼 전송에서 읽으십시오. 컴포넌트 하나가 모든 사용자를 처리하므로, GetValueFromRequest로 전송된 텍스트를 읽고 OnChange에서 컴포넌트를 변경하지 마십시오.

ASP.NET Core

Razor 뷰에서는 <sgc-code-editor> Tag Helper가 편집기를 렌더링합니다. 첫 렌더링에서 엔진과 이름마다 컴포넌트 하나를 만들며, 모든 렌더링은 속성에서 프로퍼티를 다시 설정합니다. name은 필수이며, Tag Helper에는 SQLSchemaGrid용 속성이 없습니다. 그리드의 열은 sql-schema에 나열하십시오.

데모

Demos\60.HTML\01.RunTime\30.CodeEditor는 포트 8132에서 동작하는 서버 sgc Admin Console입니다. 스키마 자동 완성이 있고 서버에서 쿼리를 실행해 Grid에 결과를 보여 주는 SQL 콘솔, 서버에서 검증되어 모든 브라우저에 즉시 적용되는 JSON 설정, 읽기 전용 스니펫 뷰어가 있습니다. 디자인 타임, Lazarus, .NET 버전도 같은 구성입니다.

계속 살펴보기

온라인으로 체험eSeGeCe 데모 서버에서 실시간으로 실행되는 코드 편집기 데모로 확인해 보세요.
온라인 도움말이 컴포넌트의 전체 API 레퍼런스와 사용 가이드입니다.
Rich Editor 컴포넌트서식 있는 텍스트를 위한 WYSIWYG 편집기로, 같은 방식으로 폼과 함께 전송됩니다.
모든 sgcHTML 컴포넌트80개 이상 컴포넌트의 전체 기능 매트릭스를 살펴보십시오.
무료 체험판 다운로드30일 체험판에는 60.HTML 데모 프로젝트가 포함되어 있습니다.
가격전체 소스 코드가 포함된 Single, Team 및 Site 라이선스.
최고의 가성비: All-Access모든 eSeGeCe 제품과 프리미엄 지원이 포함되어 연 €1,059부터 이용할 수 있어요.
All-Access 가격 보기

시작할 준비가 되셨습니까?

무료 체험판을 다운로드하고 Delphi, C++ Builder 및 .NET에서 웹 UI를 구축하기 시작하십시오.