结构化内容桥接

基本设置

在核心编辑器包之后加载桥接脚本。桥接会为编辑器实例添加 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：富文本应该如何存储？