TsgcHTMLComponent_CodeEditor: un editor de código para páginas web basado en CodeMirror 6. Resalta SQL, JSON, JavaScript, HTML, CSS, XML, Markdown, Python y Pascal, pliega bloques, busca y reemplaza, completa SQL con las tablas y columnas de tu esquema y marca los errores de JSON mientras se escribe. Su texto se envía con el formulario como un textarea, en Delphi, C++ Builder y .NET.
Define el Language y coloca su HTML dentro de un formulario. El texto vive en un <textarea> que el formulario envía como cualquier otro campo, así que el editor no necesita código propio y sigue funcionando como un textarea simple sin JavaScript. El evento opcional OnChange envía el texto al servidor mientras el usuario escribe.
TsgcHTMLComponent_CodeEditor, un editor de código cuyo texto es un campo de formulario enviado
Un editor CodeMirror 6 sobre un <textarea>. La biblioteca está incrustada en los recursos del componente y el motor la sirve como /codemirror.min.js, sin CDN
Delphi, C++ Builder, .NET
SQLSchema da al autocompletado las tablas y columnas de tu base de datos. En el envío, GetValueFromRequest lee el texto del editor y ValidateJSONValue comprueba el JSON antes de que lo almacenes.
uses
sgcHTML_Component_CodeEditor;
// un editor SQL en un formulario
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 de ajustes JSON que crece con el texto
oSettings := TsgcHTMLComponent_CodeEditor.Create(Self);
oSettings.Name := 'settings';
oSettings.Language := celJSON;
oSettings.CSSHeight := 'auto';
oSettings.CSSMaxHeight := '400px';
oSettings.Value := LoadSettings;
// el envío del formulario de ajustes
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 y un editor JSON en un solo formulario *@
<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 en un formulario
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 de ajustes JSON que crece con el texto
var settings = new TsgcHTMLComponent_CodeEditor();
settings.Name = "settings";
settings.Language = TsgcHTMLCodeEditorLanguage.celJSON;
settings.CSSHeight = "auto";
settings.CSSMaxHeight = "400px";
settings.Value = LoadSettings();
// el envío del formulario de ajustes
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>";
}El editor de un IDE de escritorio dentro de una página web, y un campo que tus formularios envían sin código propio.
Language selecciona SQL, JSON, JavaScript, HTML con su CSS y JavaScript incrustados, CSS, XML, Markdown, Python, Pascal o texto sin formato. Todos los lenguajes se resaltan, SQL añade autocompletado y JSON añade una comprobación de sintaxis.
SQLDialect selecciona las palabras clave, los tipos, las funciones y el entrecomillado de identificadores de SQL estándar, PostgreSQL, MySQL, Microsoft SQL Server (T-SQL) o SQLite. SQLSchema lista tus tablas y columnas, y SQLSchemaGrid añade las columnas de un Grid como una tabla más. Escribe un nombre de tabla y un punto para ver sus columnas, o pulsa Ctrl+Espacio.
Con ValidateJSON el editor marca los errores de sintaxis JSON mientras el usuario escribe, y la lista de errores indica qué está mal. En el servidor, ValidateJSONValue comprueba el texto enviado y devuelve el error, de modo que un archivo de ajustes roto nunca llega a tu almacén.
Ctrl+F abre el panel de buscar y reemplazar en la parte superior del editor, con opciones de coincidencia de mayúsculas, expresión regular y palabra completa, reemplazar y reemplazar todo. F3 y Mayús+F3 buscan la coincidencia siguiente y la anterior, y Ctrl+Alt+G va a una línea.
Números de línea, una línea activa resaltada y un margen de plegado, cada uno activado o desactivado con LineNumbers, HighlightActiveLine y FoldGutter. Ctrl+Mayús+[ y Ctrl+Mayús+] pliegan y despliegan el bloque en el cursor, Tab sangra TabSize espacios y Ctrl+Z y Ctrl+Y deshacen y rehacen. WordWrap ajusta las líneas largas.
El editor copia cada cambio en su textarea y dispara un evento input, de modo que un formulario envía el texto actual y las bibliotecas de formularios ven el cambio. Un clic en su etiqueta mueve el foco al editor. Con Required el navegador, y la validación de un Form, no envían el formulario mientras el editor está vacío.
Theme cetAuto sigue el data-bs-theme de la página, con el tema One Dark de CodeMirror cuando es oscuro, y cambia los colores al instante cuando cambia el tema. cetLight y cetDark fijan los colores. CSSHeight fija una altura, o auto para crecer con el texto entre CSSMinHeight y CSSMaxHeight.
El textarea y el área de edición comparten el nombre accesible de AriaLabel, o Editor de código de la configuración regional, e informan de solo lectura y obligatorio. Dentro del editor Tab sangra, así que Esc y luego Tab saca el foco. En macOS Cmd ocupa el lugar de Ctrl.
Los miembros que más vas a usar.
Value es el texto del editor. El textarea se envía bajo FieldName, si no bajo el Name del componente, si no bajo code (GetFieldName). En el servidor GetValueFromRequest devuelve el texto enviado y LoadFromRequest define Value a partir de él. Un envío de formulario manda los saltos de línea como CRLF, la regla de los navegadores para un textarea.
OnChange(Sender, aValue, aResponse) recibe el texto ChangeDelay ms (500 por defecto) después de que el usuario deja de escribir, mediante los eventos de componentes del HTMXEngine, o de tu propia ruta con ActionURL y DispatchComponentEvent. El navegador envía solo mientras el manejador está asignado y el editor no es ReadOnly, y htmx intercambia el HTML que devuelves cuando sus elementos están marcados con hx-swap-oob="true".
window.sgcHTMLCodeEditor ofrece get(id), setValue(id, text), focus(id) y scan(node). Los editores en contenido que htmx intercambia se crean, y los editores que htmx elimina se destruyen, sin código propio.
CodeMirror 6 está incrustado en los recursos del componente y el motor lo sirve como /codemirror.min.js. El navegador lo carga una vez por página, solo en las páginas que tienen un editor, por muchos editores que tengan. Cuando no puede cargarse, todos los editores de la página siguen siendo un textarea simple y el formulario aún lo envía. CodeMirror se publica bajo la licencia MIT.
El panel de buscar y reemplazar, el aviso de ir a la línea, los marcadores de plegado, la lista de autocompletado y los errores de JSON toman sus textos de la configuración regional de la biblioteca, en los 17 idiomas que incluye.
OnChange envía el texto completo por el endpoint de eventos de servidor, cuyo límite de cuerpo es 64 KB. Úsalo para textos pequeños y lee los grandes desde el envío del formulario. Un componente sirve a todos los usuarios: lee el texto enviado con GetValueFromRequest y no cambies el componente en OnChange.
En una vista Razor el Tag Helper <sgc-code-editor> renderiza el editor. El primer renderizado crea un componente por motor y nombre, y cada renderizado vuelve a definir sus propiedades a partir de los atributos. name es obligatorio, y el Tag Helper no tiene atributo para SQLSchemaGrid: lista las columnas del grid en sql-schema.
Demos\60.HTML\01.RunTime\30.CodeEditor es la sgc Admin Console, un servidor en el puerto 8132: una consola SQL con autocompletado de esquema que ejecuta consultas en el servidor sobre un Grid, ajustes JSON validados en el servidor y aplicados en vivo en cada navegador, y un visor de fragmentos de solo lectura. Las versiones de tiempo de diseño, Lazarus y .NET lo replican.
| Pruébalo en líneaMíralo en la demo Editor de código, funcionando en vivo en el servidor de demos de eSeGeCe. | Abrir | |
| Ayuda en líneaReferencia completa de la API y guía de uso para este componente. | Abrir | |
| Componente Rich EditorEl editor WYSIWYG para texto con formato, enviado con el formulario de la misma manera. | Abrir | |
| Todos los componentes de sgcHTMLExplora la matriz de características completa de más de 80 componentes. | Abrir | |
| Descargar prueba gratuitaLa prueba de 30 días incluye los proyectos de demostración 60.HTML. | Abrir | |
| PreciosLicencias Single, Team y Site con todo el código fuente. | Abrir |