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 — 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.
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.
TsgcHTMLComponent_RichEditor
Edytor Quill + ukryte pole formularza
Delphi, C++ Builder, .NET
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
Składniki, po które sięgasz najczęściej.
Content inicjuje edytor początkowym HTML; Placeholder wyświetla tekst podpowiedzi, gdy jest pusty; ReadOnly renderuje widok bez możliwości edycji.
Toolbar (TsgcHTMLRichEditorToolbar) wybiera rtMinimal, rtBasic lub rtFull, aby sterować tym, które przyciski formatowania się pojawiają.
Theme (TsgcHTMLRichEditorTheme) przełącza między motywami Quill reSnow (pasek narzędzi z obramowaniem) a reBubble (wbudowany).
Ustaw Name, aby wygenerować ukryte <input>, którego wartość jest synchronizowana z HTML edytora, dzięki czemu jest wysyłana wraz z formularzem.
Height ustawia wysokość treści edytora (na przykład 300px); EditorID ustawia atrybut id elementu używany przez skrypt inicjujący Quill.
HTML zwraca linki CDN Quill, element div edytora, ukryte pole i skrypt inicjujący; CSS zapewnia stylowanie uwzględniające motyw dla szablonu strony.