RichEditor

TsgcHTMLComponent_RichEditor — 渲染一个基于 Quill 的所见即所得富文本编辑器,带有一个为表单提交同步其 HTML 的隐藏输入框,适用于 Delphi、C++ Builder 和 .NET。

TsgcHTMLComponent_RichEditor

一个编辑器组件,发出一个 Quill 编辑器 div、其 CDN 资源和初始化脚本,外加一个在每次变更时镜像内容的隐藏输入框。设置内容和工具栏,然后读取 HTML 属性。

组件类

TsgcHTMLComponent_RichEditor

渲染为

Quill 编辑器 + 隐藏表单输入

语言

Delphi, C++ Builder, .NET

创建它、设置工具栏、渲染它

设置 Name 以便内容回传,选择一个 ToolbarTheme,然后读取 HTML(或将其放入 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

关键属性与方法

您最常使用的成员。

内容

Content 为编辑器预设初始 HTML;Placeholder 在为空时显示提示文本;ReadOnly 渲染不可编辑视图。

工具栏

ToolbarTsgcHTMLRichEditorToolbar)选择 rtMinimalrtBasicrtFull,以控制显示哪些格式化按钮。

主题

ThemeTsgcHTMLRichEditorTheme)在 reSnow(带边框工具栏)和 reBubble(内联)Quill 主题之间切换。

表单绑定

设置 Name 以发出一个隐藏 <input>,其值与编辑器 HTML 保持同步,使其随表单一起回传。

尺寸

Height 设置编辑器主体高度(例如 300px);EditorID 设置 Quill 初始化脚本使用的元素 id

输出

HTML 返回 Quill CDN 链接、编辑器 div、隐藏输入框和初始化脚本;CSS 为页面模板提供主题感知样式。

继续探索

所有 sgcHTML 组件浏览 60 多个组件的完整功能矩阵。
下载免费试用版30 天试用版附带 60.HTML 演示项目。
价格Single、Team 和 Site 授权,均含完整源代码。

准备好开始了吗?

下载免费试用版,为您的 Delphi、C++ Builder 或 .NET Web 应用添加富文本编辑器。