RichEditor

TsgcHTMLComponent_RichEditor — renderize um editor de rich-text WYSIWYG baseado em Quill com uma entrada oculta que sincroniza seu HTML para envio de formulário, em Delphi, C++ Builder e .NET.

Visão geral

TsgcHTMLComponent_RichEditor

Um componente de editor que emite um div de editor Quill, seus assets de CDN e um script de inicialização, mais uma entrada oculta que espelha o conteúdo a cada alteração. Defina o conteúdo e a barra de ferramentas e então leia a propriedade HTML.

Classe do componente

TsgcHTMLComponent_RichEditor

Renderiza

Editor Quill + entrada de formulário oculta

Família

Formulários & Entradas

Linguagens

Delphi, C++ Builder, .NET

QuickStart

Crie, defina a barra de ferramentas, renderize

Defina Name para que o conteúdo seja enviado de volta, escolha uma Toolbar e um Theme e então leia HTML (ou insira-o em uma 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

Referência

Principais propriedades & métodos

Os membros que você usa com mais frequência.

Conteúdo

Content inicializa o editor com HTML inicial; Placeholder mostra um texto de dica enquanto vazio; ReadOnly renderiza uma visualização não editável.

Barra de ferramentas

Toolbar (TsgcHTMLRichEditorToolbar) seleciona rtMinimal, rtBasic ou rtFull para controlar quais botões de formatação aparecem.

Tema

Theme (TsgcHTMLRichEditorTheme) alterna entre os temas Quill reSnow (barra de ferramentas com borda) e reBubble (inline).

Vinculação a formulário

Defina Name para emitir um <input> oculto cujo valor é mantido em sincronia com o HTML do editor para que seja enviado junto com o formulário.

Dimensionamento

Height define a altura do corpo do editor (por exemplo 300px); EditorID define o id do elemento usado pelo script de inicialização do Quill.

Saída

HTML retorna os links de CDN do Quill, o div do editor, a entrada oculta e o script de inicialização; CSS fornece estilização ciente do tema para o template de página.

Recursos

Continue explorando

	Todos os Componentes sgcHTMLExplore a matriz completa de recursos com mais de 60 componentes.	Abrir
	Baixar Versão de Avaliação GratuitaA avaliação de 30 dias inclui os projetos de demonstração 60.HTML.	Abrir
	PreçosLicenças Single, Team e Site com código-fonte completo.	Abrir