CKEditor Ecosystem Documentation
Search
Contribute to this guide
Home/CKEditor 5/Features

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.

Blog about consumer electronics | Pixel

👾 Pixel - we write about consoles and more!

Nintendo Switch controller on a white background

Nintendo Switch: Performance isn't the key?

May 24, 2023 • 7 min read Game Consoles

Nintendo always had a different approach to games - they didn't race for fps or resolution.

Read more
PlayStation 5 with a blurred background

The new fast SSD in PlayStation 5

April 19, 2023 • 10 min read Game Consoles

Sony engineers at a conference spent much time describing their new SSD in detail. Is it a game-changer?

Read more
Xbox Series X on a green background

Backward compatibility on Xbox Series X

March 14, 2023 • 4 min read Game Consoles

The new Microsoft console allows playing some classics from the previous generations. Let's look at the game library.

Read more

# 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, /* ... */ ],
		htmlSupport: {
			fullPage: {
				// Configuration.
			}
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );

# Configuration

# Render styles

By default, the full page HTML feature does not render the CSS from <style> that may be located in the <head> section edited content. To enable that possibility, set the config.htmlSupport.fullPage.allowRenderStylesFromHead option to true.

Plugin extracts <style> elements from the edited content moves them to the main document <head>, and renders them. When CSS in <style> tag is changed using, for example, the Enhanced source code editing feature, previously added <style> elements to the main document <head> will be replaced by the new ones.

However, by enabling the ability to render CSS from <style> elements located in the <head> section of the edited content, you expose the users of your system to the risk of executing malicious code inside the editor. Therefore, we highly recommend sanitizing your CSS using some library that will strip the malicious code from the styles before rendering them. You can plug in the sanitizer by defining the config.htmlSupport.fullPage.sanitizeCss option.

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        // ... Other configuration options ...
        htmlSupport: {
            fullPage: {
                allowRenderStylesFromHead: true,
                // Strip unsafe properties and values, for example:
                // values like url( ... ) that may execute malicious code
                // from an unknown source.
                sanitizeCss( CssString ) {
                    const sanitizedCss = sanitize( CssString );

                    return {
                        css: sanitizedCss,
                        // true or false depending on whether
                        // the sanitizer stripped anything.
                        hasChanged: true
                    };
                }
            }
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# Security

It is a plain security risk. The user may provide a CSS mistakenly copied from a malicious website. It could also end up in the user’s clipboard (as it would usually be copied and pasted) by any other means.

You can instruct some advanced users to never paste CSS code from untrusted sources. However, in most cases, it is highly recommended to secure the system by configuring the Full page HTML feature to use a CSS sanitizer and, optionally, by setting strict Content Security Policy (CSP) rules.

# Sanitizer

The config.htmlSupport.fullPage.sanitizeCss option allows plugging an external sanitizer.

# CSP

In addition to using a sanitizer, you can use the built-in browser mechanism called Content Security Policy. By using CSP, you can let the browser know the allowed sources that CSS can use.

# 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.