Structured JSON & Markdown Demo

This example adds a structured content bridge on top of the editor so you can work with semantic JSON, Markdown import/export, static HTML rendering, and schema validation alongside normal WYSIWYG editing.

AI Toolkit Demo JavaScript API

Structured content bridge.This demo keeps HTML editing intact while exposing JSON, Markdown, static render output, and validation through a browser-side bridge.

HTML output

Structured JSON

Markdown

Static HTML render

Validation status

Validation issues

Demo Code

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css" />
<script type="text/javascript" src="/richtexteditor/rte.js"></script>
<script type="text/javascript" src="/richtexteditor/plugins/all_plugins.js"></script>
<script type="text/javascript" src="/richtexteditor/plugins/structured-content-bridge.js"></script>

<div id="div_json_editor"></div>

<script>
    RichTextEditorStructuredBridge.installStructuredContentBridge();

    var jsonEditor = new RichTextEditor("#div_json_editor", {
        toolbar: "full",
        height: "520px",
        showStatistics: true,
        showTagList: true
    });

    jsonEditor.setJSON(jsonTemplate);

    function refreshStructuredOutputs() {
        var documentModel = jsonEditor.getJSON();
        var validation = RichTextEditor.validateStructuredContent(documentModel);
        document.getElementById("jsonHtmlOutput").value = jsonEditor.getHTMLCode();
        document.getElementById("jsonStructuredOutput").value = JSON.stringify(documentModel, null, 2);
        document.getElementById("jsonMarkdownOutput").value = RichTextEditor.toMarkdown(documentModel);
        document.getElementById("jsonStaticRender").innerHTML = RichTextEditor.renderHTML(documentModel);
    }

    jsonEditor.attachEvent("change", refreshStructuredOutputs);
    refreshStructuredOutputs();
</script>

Examples

Structured JSON & Markdown Demo

Demo Code