Save and Load Editor Content

Name: RichTextEditor
Price: 129 USD
Author: Richscripts Inc.

Save: editor.getHTMLCode() returns the document as an HTML string. Send that to your server and store it in a text column.
Load: fetch the stored HTML and pass it to editor.setHTMLCode(html).
Sanitize on the server, every time. The editor cleans what users paste, but anyone can post to your save endpoint without the editor. Clean the HTML before you store or show it.
This page keeps the draft in your browser's local storage, so the round trip is real: save, reload the page, and it comes back.

Edit the text, then press Save.

In the browser

<div id="div_editor1"></div>
<script>
    var editor1 = new RichTextEditor("#div_editor1");

    // Save: read the document as HTML and send it to your server.
    function save() {
        var html = editor1.getHTMLCode();
        return fetch("/api/documents/42", {
            method: "PUT",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ html: html })
        });
    }

    // Load: fetch the stored HTML and put it back in the editor.
    function load() {
        return fetch("/api/documents/42")
            .then(function (r) { return r.json(); })
            .then(function (doc) { editor1.setHTMLCode(doc.html || ""); });
    }
</script>

On the server

Store the HTML in a text column large enough for real documents (for example MEDIUMTEXT in MySQL or nvarchar(max) in SQL Server). Each example sanitizes before storing.

Node.js

// Node.js + Express. Sanitize on the server: anyone can post to this route
// without going through the editor.
import express from "express";
import sanitizeHtml from "sanitize-html";

const app = express();
app.use(express.json({ limit: "2mb" }));

app.put("/api/documents/:id", async (req, res) => {
  const clean = sanitizeHtml(req.body.html ?? "", {
    allowedTags: sanitizeHtml.defaults.allowedTags.concat(["img", "h1", "h2"]),
    allowedAttributes: { a: ["href", "target", "rel"], img: ["src", "alt", "width", "height"], "*": ["class", "style"] }
  });
  await db.documents.update(req.params.id, { html: clean });
  res.sendStatus(204);
});

app.get("/api/documents/:id", async (req, res) => {
  const doc = await db.documents.find(req.params.id);
  res.json({ html: doc?.html ?? "" });
});

ASP.NET Core

// ASP.NET Core minimal API with the HtmlSanitizer NuGet package (Ganss.Xss).
using Ganss.Xss;

var sanitizer = new HtmlSanitizer();
sanitizer.AllowedAttributes.Add("class");

app.MapPut("/api/documents/{id:int}", async (int id, DocumentDto dto, AppDb db) =>
{
    var doc = await db.Documents.FindAsync(id) ?? db.Documents.Add(new Document { Id = id }).Entity;
    doc.Html = sanitizer.Sanitize(dto.Html ?? "");
    await db.SaveChangesAsync();
    return Results.NoContent();
});

app.MapGet("/api/documents/{id:int}", async (int id, AppDb db) =>
    Results.Ok(new { html = (await db.Documents.FindAsync(id))?.Html ?? "" }));

PHP

<?php
// PHP: the download package includes sanitize-html.php, a DOMDocument allowlist
// that works on PHP 5.6 and later with no Composer dependency.
require __DIR__ . "/sanitize-html.php";

$pdo = new PDO("mysql:host=localhost;dbname=app;charset=utf8mb4", $user, $pass);

if ($_SERVER["REQUEST_METHOD"] === "POST") {
    $clean = rte_sanitize_html($_POST["htmlcode"] ?? "");
    $stmt = $pdo->prepare("UPDATE documents SET html = ? WHERE id = ?");
    $stmt->execute([$clean, 42]);
    exit("OK");
}

$stmt = $pdo->prepare("SELECT html FROM documents WHERE id = ?");
$stmt->execute([42]);
echo $stmt->fetchColumn() ?: "";