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

guideFull 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 source editing feature toolbar button Source 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' ), {
        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.
  • Source editing – Provides the ability for viewing and editing the source of the document.
  • HTML embed – Allows embedding an arbitrary HTML snippet in the editor.