RichEditor

TsgcHTMLComponent_RichEditor — renderuje edytor tekstu sformatowanego WYSIWYG oparty na Quill z ukrytym polem, które synchronizuje jego HTML na potrzeby wysyłania formularza, w Delphi, C++ Builder i .NET.

TsgcHTMLComponent_RichEditor

Komponent edytora, który generuje element div edytora Quill, jego zasoby CDN i skrypt inicjujący, wraz z ukrytym polem odzwierciedlającym treść przy każdej zmianie. Ustaw treść i pasek narzędzi, a następnie odczytaj właściwość HTML.

Klasa komponentu

TsgcHTMLComponent_RichEditor

Renderuje

Edytor Quill + ukryte pole formularza

Języki

Delphi, C++ Builder, .NET

Utwórz go, ustaw pasek narzędzi, wyrenderuj

Ustaw Name, aby treść była wysyłana, wybierz Toolbar i Theme, a następnie odczytaj HTML (albo umieść go na stronie 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

Kluczowe właściwości i metody

Składniki, po które sięgasz najczęściej.

Treść

Content inicjuje edytor początkowym HTML; Placeholder wyświetla tekst podpowiedzi, gdy jest pusty; ReadOnly renderuje widok bez możliwości edycji.

Pasek narzędzi

Toolbar (TsgcHTMLRichEditorToolbar) wybiera rtMinimal, rtBasic lub rtFull, aby sterować tym, które przyciski formatowania się pojawiają.

Motyw

Theme (TsgcHTMLRichEditorTheme) przełącza między motywami Quill reSnow (pasek narzędzi z obramowaniem) a reBubble (wbudowany).

Wiązanie z formularzem

Ustaw Name, aby wygenerować ukryte <input>, którego wartość jest synchronizowana z HTML edytora, dzięki czemu jest wysyłana wraz z formularzem.

Rozmiar

Height ustawia wysokość treści edytora (na przykład 300px); EditorID ustawia atrybut id elementu używany przez skrypt inicjujący Quill.

Wynik

HTML zwraca linki CDN Quill, element div edytora, ukryte pole i skrypt inicjujący; CSS zapewnia stylowanie uwzględniające motyw dla szablonu strony.

Poznawaj dalej

Wszystkie komponenty sgcHTMLPrzejrzyj pełną matrycę funkcji 60+ komponentów.
Pobierz bezpłatną wersję próbną30-dniowa wersja próbna zawiera projekty demonstracyjne 60.HTML.
CennikLicencje Single, Team i Site z pełnym kodem źródłowym.

Gotowy, aby zacząć?

Pobierz bezpłatną wersję próbną i dodaj edytor tekstu sformatowanego do swojej aplikacji webowej w Delphi, C++ Builder lub .NET.