Componente RichEditor — sgcHTML

De un vistazo

TsgcHTMLComponent_RichEditor

Un componente de editor que genera un div de editor Quill, sus recursos de CDN y un script de inicialización, además de un input oculto que refleja el contenido en cada cambio. Define el contenido y la barra de herramientas, y luego lee la propiedad HTML.

Clase del componente

TsgcHTMLComponent_RichEditor

Genera

Editor Quill + input oculto de formulario

Familia

Formularios y Entradas

Lenguajes

Delphi, C++ Builder, .NET

Inicio rápido

Créalo, define la barra de herramientas, genéralo

Define Name para que el contenido se envíe de vuelta, elige una Toolbar y un Theme, y luego lee HTML (o insértalo en una página TsgcHTMLTemplate_Bootstrap).

uses
  sgcHTML_Component_RichEditor;

var
  oEditor: TsgcHTMLComponent_RichEditor;
begin
  oEditor := TsgcHTMLComponent_RichEditor.Create(nil);
  try
    oEditor.Name := 'body';
    oEditor.Content := '<p>Hello <b>world</b></p>';
    oEditor.Placeholder := 'Write your post...';
    oEditor.Height := '300px';
    oEditor.Toolbar := rtFull;
    oEditor.Theme := reSnow;

    WebModule.Response := oEditor.HTML;   // Quill editor + hidden input
  finally
    oEditor.Free;
  end;
end;

// includes: sgcHTML_Component_RichEditor.hpp

TsgcHTMLComponent_RichEditor *oEditor = new TsgcHTMLComponent_RichEditor(NULL);
try
{
  oEditor->Name = "body";
  oEditor->Content = "<p>Hello <b>world</b></p>";
  oEditor->Placeholder = "Write your post...";
  oEditor->Height = "300px";
  oEditor->Toolbar = rtFull;
  oEditor->Theme = reSnow;

  String html = oEditor->HTML;   // Quill editor + hidden input
}
__finally
{
  delete oEditor;
}

using esegece.sgcWebSockets;

var editor = new TsgcHTMLComponent_RichEditor();
editor.Name = "body";
editor.Content = "<p>Hello <b>world</b></p>";
editor.Placeholder = "Write your post...";
editor.Height = "300px";
editor.Toolbar = TsgcHTMLRichEditorToolbar.rtFull;
editor.Theme = TsgcHTMLRichEditorTheme.reSnow;

string html = editor.HTML;   // Quill editor + hidden input

Referencia

Propiedades y métodos clave

Los miembros que más utilizarás.

Contenido

Content inicializa el editor con HTML de partida; Placeholder muestra texto de ayuda cuando está vacío; ReadOnly genera una vista no editable.

Barra de herramientas

Toolbar (TsgcHTMLRichEditorToolbar) elige rtMinimal, rtBasic o rtFull para controlar qué botones de formato aparecen.

Tema

Theme (TsgcHTMLRichEditorTheme) alterna entre los temas de Quill reSnow (barra de herramientas con borde) y reBubble (en línea).

Vinculación con el formulario

Define Name para generar un <input> oculto cuyo valor se mantiene sincronizado con el HTML del editor, de modo que se envía de vuelta con el formulario.

Tamaño

Height define la altura del cuerpo del editor (por ejemplo 300px); EditorID define el id del elemento que usa el script de inicialización de Quill.

Salida

HTML devuelve los enlaces de CDN de Quill, el div del editor, el input oculto y el script de inicialización; CSS aporta estilos adaptados al tema para la plantilla de página.

Recursos

Sigue explorando

	Todos los componentes de sgcHTMLExplora la matriz de características completa de más de 60 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

RichEditor