構造化コンテンツブリッジ

基本的なセットアップ

ブリッジは、エディターのコアバンドルの後に読み込みます。ブリッジはエディターのインスタンスに JSON のヘルパーを追加し、RichTextEditor で Markdown とレンダリングのヘルパーを公開します。

<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/all_plugins.js"></script>
<script src="/richtexteditor/plugins/structured-content-bridge.js"></script>

<script>
  RichTextEditorStructuredBridge.installStructuredContentBridge();
  var editor = new RichTextEditor("#editor");
</script>

エディターのメソッド

• editor.getJSON() は、意味構造を持つ文書ツリーと、互換性のためのフィールドを返します。
• editor.setJSON(documentModel) は、ノードベースの構造からコンテンツを復元します。

var documentModel = editor.getJSON();
editor.setJSON({
  type: "doc",
  version: 2,
  format: "richtexteditor-json",
  content: [
    {
      type: "paragraph",
      content: [{ type: "text", text: "Restored from JSON" }]
    }
  ]
});

グローバルなヘルパー

• RichTextEditor.fromMarkdown(markdown)
• RichTextEditor.toMarkdown(documentModel)
• RichTextEditor.renderHTML(documentModel)
• RichTextEditor.validateStructuredContent(documentModel)

var restored = RichTextEditor.fromMarkdown("## Hello\n\nMarkdown works too");
var html = RichTextEditor.renderHTML(restored);
var validation = RichTextEditor.validateStructuredContent(restored);
var markdown = RichTextEditor.toMarkdown(restored);

試してみる

構造化 JSON のデモでは、リアルタイムの HTML 出力、意味構造を持つ JSON、Markdown との相互変換、静的な HTML のレンダリング、検証の結果を並べて確認できます。これらのどれを正式な保存形式にするかを選ぶ際のトレードオフについては、HTML、JSON、Markdown：リッチテキストをどの形式で保存すべきかを参照してください。