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.

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