RichEditor

TsgcHTMLComponent_RichEditor — Delphi、C++ Builder、.NET で、フォーム送信のために HTML を同期する隠し入力欄を備えた、Quill ベースの WYSIWYG リッチテキストエディターをレンダリングします。

概要

TsgcHTMLComponent_RichEditor

Quill エディターの div、その CDN アセット、初期化スクリプトに加え、変更のたびに内容を反映する隠し入力欄を出力するエディターコンポーネントです。内容とツールバーを設定してから、HTML プロパティを読み取ります。

コンポーネントクラス

TsgcHTMLComponent_RichEditor

レンダリング内容

Quill エディター + 隠しフォーム入力

ファミリー

フォーム & 入力

言語

Delphi, C++ Builder, .NET

クイックスタート

作成し、ツールバーを設定し、レンダリングする

内容が送信されるように Name を設定し、Toolbar と Theme を選択してから、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

Content は初期 HTML をエディターに設定します。Placeholder は空のときにヒントテキストを表示します。ReadOnly は編集不可のビューをレンダリングします。

Toolbar（TsgcHTMLRichEditorToolbar）は、表示する書式ボタンを制御するために rtMinimal、rtBasic、rtFull を選択します。

Theme

Theme（TsgcHTMLRichEditorTheme）は、reSnow（枠付きツールバー）と reBubble（インライン）の Quill テーマを切り替えます。

Form binding

Name を設定すると、エディターの HTML と同期した値を持つ隠し <input> が出力され、フォームと一緒に送信されます。

Sizing

Height はエディター本体の高さ（例えば 300px）を設定します。EditorID は、Quill 初期化スクリプトが使用する要素の id を設定します。

Output

HTML は、Quill の CDN リンク、エディターの div、隠し入力欄、初期化スクリプトを返します。CSS は、ページテンプレート用のテーマ対応スタイルを提供します。

リソース

さらに詳しく

	すべての sgcHTML コンポーネント60 以上のコンポーネントの全機能マトリックスを閲覧できます。	開く
	無料体験版のダウンロード30 日間の体験版には 60.HTML デモプロジェクトが付属します。	開く
	価格完全なソースコード付きの Single、Team、Site ライセンス。	開く