Structured Content Bridge

Configuração básica

Carregue o bridge depois do bundle principal do editor. O bridge amplia a instância do editor com helpers de JSON e expõe helpers de Markdown/renderização em RichTextEditor.

<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>

Métodos do editor

• editor.getJSON() retorna uma árvore semântica do documento, além de campos de compatibilidade.
• editor.setJSON(documentModel) restaura o conteúdo a partir da estrutura baseada em nós.

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

Helpers globais

• 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);

Experimente

Use a demonstração de Structured JSON para inspecionar, lado a lado, a saída HTML ao vivo, o JSON semântico, a conversão de ida e volta do Markdown, a renderização de HTML estático e os resultados da validação. Para entender os prós e contras de escolher um desses formatos como fonte oficial dos seus dados, veja HTML, JSON ou Markdown: como você deve armazenar texto rico?