Code Editor
TsgcHTMLComponent_CodeEditor：基于 CodeMirror 6 的网页代码编辑器。它为 SQL、JSON、JavaScript、HTML、CSS、XML、Markdown、Python 和 Pascal 提供语法高亮，支持折叠代码块、查找和替换，用您架构中的表和列补全 SQL，并在输入时标出 JSON 错误。它的文本像 textarea 一样随表单提交。适用于 Delphi、C++ Builder 和 .NET。
TsgcHTMLComponent_CodeEditor：基于 CodeMirror 6 的网页代码编辑器。它为 SQL、JSON、JavaScript、HTML、CSS、XML、Markdown、Python 和 Pascal 提供语法高亮，支持折叠代码块、查找和替换，用您架构中的表和列补全 SQL，并在输入时标出 JSON 错误。它的文本像 textarea 一样随表单提交。适用于 Delphi、C++ Builder 和 .NET。
设置 Language，并把它的 HTML 放进表单中。文本保存在一个 <textarea> 中，表单像提交其他字段一样提交它，因此编辑器不需要任何自己的代码，没有 JavaScript 时仍可作为普通 textarea 使用。可选的 OnChange 事件会在用户输入时把文本发送到服务器。
TsgcHTMLComponent_CodeEditor，文本是一个被提交的表单字段的代码编辑器
位于 <textarea> 之上的 CodeMirror 6 编辑器。该库内嵌在组件资源中，由引擎以 /codemirror.min.js 提供，无需 CDN
Delphi, C++ Builder, .NET
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 增加语法检查。
SQLDialect 选择标准 SQL、PostgreSQL、MySQL、Microsoft SQL Server (T-SQL) 或 SQLite 的关键字、类型、函数和标识符引号。SQLSchema 列出您的表和列，SQLSchemaGrid 把某个 Grid 的列作为另一张表加入。输入表名和一个点即可看到它的列，或按 Ctrl+Space。
启用 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 上用 Cmd 代替 Ctrl。
您最常用到的成员。
Value 是编辑器的文本。textarea 以 FieldName 提交，否则用组件的 Name，再否则用 code（GetFieldName）。在服务器上，GetValueFromRequest 返回提交的文本，LoadFromRequest 据此设置 Value。表单提交时换行符以 CRLF 发送，这是浏览器对 textarea 的规则。
OnChange(Sender, aValue, aResponse) 在用户停止输入 ChangeDelay 毫秒（默认 500）后，通过 HTMXEngine 的组件事件，或通过使用 ActionURL 和 DispatchComponentEvent 的您自己的路由接收文本。只有在分配了处理程序且编辑器不是 ReadOnly 时，浏览器才会提交，如果返回的 HTML 元素标有 hx-swap-oob="true"，htmx 就会换入它。
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 中更改组件。
在 Razor 视图中，<sgc-code-editor> Tag Helper 渲染编辑器。首次渲染会为每个引擎和名称创建一个组件，每次渲染都会再次根据特性设置其属性。name 是必需的，Tag Helper 没有 SQLSchemaGrid 对应的特性：请在 sql-schema 中列出网格的列。
Demos\60.HTML\01.RunTime\30.CodeEditor 是 sgc Admin Console，一个在端口 8132 上的服务器：带架构补全的 SQL 控制台在服务器上运行查询并显示到 Grid 中，JSON 设置由服务器验证并实时应用到每个浏览器，另有一个只读的代码片段查看器。设计时、Lazarus 和 .NET 版本与之对应。