Examples

Demo Code

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css" />
        <script type="text/javascript" src="/richtexteditor/rte-config.js"></script>
        <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 class="rounded-[1.4rem] border border-sky-100 bg-sky-50 px-4 py-4 text-sm leading-7 text-slate-700">
            <strong class="text-slate-900">Structured content bridge.</strong>
            This demo keeps HTML editing intact while exposing JSON, Markdown, static render output, and validation through a browser-side bridge.
        </div>

        <div id="div_json_editor" class="mt-4"></div>

        <script>
            RichTextEditorStructuredContent.installStructuredContentBridge();

            var jsonEditorConfig = {
                toolbar: "full",
                height: "520px",
                showStatistics: true,
                showTagList: true
            };

            var jsonEditor = new RichTextEditor("#div_json_editor", jsonEditorConfig);
            var jsonTemplate = {
                type: "doc",
                version: 2,
                format: "richtexteditor-json",
                content: [
                    {
                        type: "heading",
                        attrs: { level: 2 },
                        content: [{ type: "text", text: "Structured content workflow" }]
                    },
                    {
                        type: "paragraph",
                        content: [
                            { type: "text", text: "Capture a " },
                            { type: "text", text: "JSON", marks: [{ type: "bold" }] },
                            { type: "text", text: " document model while still keeping HTML output for rendering pipelines." }
                        ]
                    },
                    {
                        type: "bulletList",
                        content: [
                            { type: "listItem", content: [{ type: "paragraph", content: [{ type: "text", text: "Semantic blocks and inline marks" }] }] },
                            { type: "listItem", content: [{ type: "paragraph", content: [{ type: "text", text: "Markdown import and export" }] }] },
                            { type: "listItem", content: [{ type: "paragraph", content: [{ type: "text", text: "Static HTML rendering and validation" }] }] }
                        ]
                    }
                ]
            };
            var markdownTemplate = "## Markdown import\\n\\nThis demo can restore **Markdown** into the structured JSON model.\\n\\n- Markdown in\\n- JSON in state\\n- HTML for rendering\\n\\n> Validate the document before you save it.";

            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);
                document.getElementById("jsonValidationStatus").textContent = validation.valid ? "Valid structured document" : "Validation issues found";
                document.getElementById("jsonValidationStatus").style.color = validation.valid ? "#166534" : "#b42318";
                document.getElementById("jsonValidationIssues").value = validation.valid ? "[]" : JSON.stringify(validation.issues, null, 2);
            }

            function applyStructuredJson() {
                jsonEditor.setJSON(JSON.parse(document.getElementById("jsonStructuredOutput").value));
                refreshStructuredOutputs();
            }

            function validateStructuredJson() {
                var validation = RichTextEditor.validateStructuredContent(JSON.parse(document.getElementById("jsonStructuredOutput").value));
                document.getElementById("jsonValidationStatus").textContent = validation.valid ? "Valid structured document" : "Validation issues found";
                document.getElementById("jsonValidationStatus").style.color = validation.valid ? "#166534" : "#b42318";
                document.getElementById("jsonValidationIssues").value = validation.valid ? "[]" : JSON.stringify(validation.issues, null, 2);
            }

            function applyMarkdownTemplate() {
                jsonEditor.setJSON(RichTextEditor.fromMarkdown(document.getElementById("jsonMarkdownOutput").value));
                refreshStructuredOutputs();
            }

            function loadJsonSample() {
                jsonEditor.setJSON(jsonTemplate);
                refreshStructuredOutputs();
            }

            function loadMarkdownSample() {
                jsonEditor.setJSON(RichTextEditor.fromMarkdown(markdownTemplate));
                refreshStructuredOutputs();
            }

            jsonEditor.attachEvent("change", function () {
                refreshStructuredOutputs();
            });

            refreshStructuredOutputs();
        </script>

        <div class="mt-4 flex flex-wrap gap-3">
            <button class="btn btn-primary" onclick="refreshStructuredOutputs(); return false;">Refresh outputs</button>
            <button class="btn btn-outline-primary" onclick="applyStructuredJson(); return false;">Apply JSON</button>
            <button class="btn btn-outline-primary" onclick="validateStructuredJson(); return false;">Validate JSON</button>
            <button class="btn btn-outline-primary" onclick="applyMarkdownTemplate(); return false;">Apply Markdown</button>
            <button class="btn btn-outline-secondary" onclick="loadJsonSample(); return false;">Load JSON sample</button>
            <button class="btn btn-outline-secondary" onclick="loadMarkdownSample(); return false;">Load Markdown sample</button>
        </div>

        <div class="mt-6 grid gap-5 xl:grid-cols-2">
            <div>
                <label class="mb-2 block text-sm font-bold text-slate-700">HTML output</label>
                <textarea id="jsonHtmlOutput" class="form-control" rows="10"></textarea>
            </div>
            <div>
                <label class="mb-2 block text-sm font-bold text-slate-700">Structured JSON</label>
                <textarea id="jsonStructuredOutput" class="form-control" rows="10"></textarea>
            </div>
            <div>
                <label class="mb-2 block text-sm font-bold text-slate-700">Markdown</label>
                <textarea id="jsonMarkdownOutput" class="form-control" rows="10"></textarea>
            </div>
            <div>
                <label class="mb-2 block text-sm font-bold text-slate-700">Static HTML render</label>
                <div id="jsonStaticRender" class="form-control" style="min-height: 244px; overflow: auto; background: #f8fafc;"></div>
            </div>
            <div>
                <label class="mb-2 block text-sm font-bold text-slate-700">Validation status</label>
                <div id="jsonValidationStatus" class="form-control" style="min-height: 48px; background: #f8fafc;"></div>
            </div>
            <div>
                <label class="mb-2 block text-sm font-bold text-slate-700">Validation issues</label>
                <textarea id="jsonValidationIssues" class="form-control" rows="10"></textarea>
            </div>
        </div>