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

To add this feature to your rich-text editor, install the @ckeditor/ckeditor5-html-support package:

npm install --save @ckeditor/ckeditor5-html-support

And add it to your plugin list configuration:

import { FullPage } from '@ckeditor/ckeditor5-html-support';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ FullPage, /* ... */ ],
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

Read more about installing plugins.

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