Examples

Full Page Editing

RichTextEditor edits the body of a document. Head-level markup — <style>, <link>, <meta>, <title>, <base>— is removed on the way in, deliberately: a stylesheet or <base> smuggled through an editor restyles or re-targets the whole page hosting it. Feed it a complete document below and watch which half survives.

Body-level content is what the editor owns. Press the button below to try feeding it a complete HTML document and watch what survives.

What the editor saved

Loading…

The document you actually publish

Build it where you control it — on the server, around the body the editor gives you. That keeps the title, canonical URL, and stylesheet under your application’s control rather than an author’s.

// The editor owns the body. Compose the document around it:
var body = editor.getHTMLCode();

var page =
    "<!DOCTYPE html><html><head>" +
    "<meta charset=\"utf-8\">" +
    "<title>" + escapeHtml(title) + "</title>" +
    "<link rel=\"stylesheet\" href=\"/site.css\">" +
    "</head><body>" + body + "</body></html>";

For a full-viewport editing surface (a different meaning of “full page”), use the fullscreen toolbar button or execCommand("fullscreenenter").

Getting HTML content from the editor