Contribute to this guide

Full page HTML

Thanks to the full page HTML feature you can use CKEditor 5 to edit entire HTML pages (from <html> to </html>), including the page metadata. While the General HTML Support feature focuses on elements inside the content (the document’s <body>), this feature enables markup mostly invisible to the end user.

# Demo

Use the Enhanced source code editing feature toolbar button Enhanced source code editing to view and edit the HTML source of the document. Pay attention to the underlying markup.

# Installation

⚠️ New import paths

Starting with version 42.0.0, we changed the format of import paths. This guide uses the new, shorter format. Refer to the Packages in the legacy setup guide if you use an older version of CKEditor 5.

After installing the editor, add the feature to your plugin list and toolbar configuration:

import { ClassicEditor, FullPage } from 'ckeditor5';

ClassicEditor
	.create( document.querySelector( '#editor' ), {
		licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
		plugins: [ FullPage, /* ... */ ],
	} )
	.then( /* ... */ )
	.catch( /* ... */ );

# Additional feature information

Here are some examples of the HTML elements you can enable with this plugin:

  • The HTML DOCTYPE preamble: <!DOCTYPE html>
  • The HTML root element: <html>
  • The head element: <head>
  • The document’s title: <title>
  • Meta tags inside the head element, like: <meta name="description" content="Meta description">

CKEditor 5 has other features related to HTML editing that you may want to check:

  • General HTML Support – Allows you to enable HTML features (elements, attributes, classes, styles) that are not supported by other dedicated CKEditor 5 plugins.
  • Enhanced source code editing – Allows for viewing and editing the source code of the document in a handy modal window (compatible with all editor types) with syntax highlighting, autocompletion and more.
  • HTML embed – Allows embedding an arbitrary HTML snippet in the editor.