CKEditor Ecosystem Documentation
Search
⚠️ WarningNightly documentation ahead. Switch to the stable editor documentation.
Contribute to this guide
Home/CKEditor 5/Features

guideSource editing

The SourceEditing feature provides the ability for viewing and editing the source of the document. The source editing plugin is a low-level document editing interface, while all the buttons and dropdowns located in a editor’s toolbar are high-level ones.

The changes made to the document source will be applied to the editor’s data model only, if the editor understands (via loaded plugins) the given syntax. You will lose all changes that the editor features cannot understand. For example, if the editor does not have a horizontal line plugin loaded, the <hr> tag added in the document source will be removed upon exit from the source editing mode.

Currently, the source editing mode is supported in the classic editor. The source editing feature is not compatible with CKEditor 5 collaboration features. If you would like to use collaboration features, but for some reason you would like to also enable source editing, please contact us.

# Demo

Use the editor below to see the source editing plugin in action. Toggle the source editing mode Source editing, make some changes in the HTML code (i.e. add new paragraphs or an ordered list), and go back to see that they are present in the document content. You can also use one of the numerous CKEditor 5 features available via the toolbar and observe how they render in the HTML source. Notice the collapsible table of contents, available thanks to the General HTML support feature and introducing HTML elements not yet covered by official plugins.

Table of contents

  1. The singing Canadian
  2. Spaceflights
  3. Bibliography
  4. Space Oddity

The singing Canadian

Christ Hadfield onboard ISS, photo courtesy NASA.

Chris Austin Hadfield was born on August 29, 1959, in Canada. As a child, he watched the Apollo 11 moon landing and it inspired him to also become an astronaut. At the time Canada had no space program, so Hadfield joined the Royal Canadian Air Forces and served as a fighter pilot for 25 years.

In 1992, Hadfield was accepted into the Canadian astronaut program by the Canadian Space Agency. He flew his first mission to the Russian Mir space station in 1995 aboard the Atlantis space shuttle. Six years later onboard the Endeavour space shuttle he flew to the International Space Station. He revisited the ISS in 2012 flying a Russian Soyuz spacecraft and taking command over the station during Expedition 34/35.

Hadfield was most recognised by the general public for his rendition of the famous Space Oddity song by David Bowie which he recorded onboard the International Space Station. He also recorded numerous educational materials for schools while working in orbit. After his retirement from the astronaut service, he wrote three books based on his experience.

Spaceflights

Hadfield flew to space thrice. He also performed two EVAs (Extra-vehicular activity, a spacewalk) that lasted together for 14 hours 53 minutes and 38 seconds.

Flight Date Spacecraft Function Emblem
STS-74 12-20.11.1995 Atlantis Mission Specialist
STS-100 19.04.2001-01.05.2001 Endeavour Mission Specialist
Expedition 34/35 19.12.2012-14.05.2013 Soyuz TMA-07M ISS Commander

Bibliography

  • An Astronaut's Guide to Life on Earth: What Going to Space Taught Me About Ingenuity, Determination, and Being Prepared for Anything. Little, Brown and Company, 2013
  • You Are Here: Around the World in 92 Minutes: Photographs from the International Space Station. Little, Brown and Company, 2014
  • The Darkest Dark. Illustrated by Terry and Eric Fan. Little, Brown and Company, 2016
  • The Apollo Murders Random House, 2021

Space Oddity

The rendition of Space Oddity by Chris Hadfield, shot in 2013 was the first ever music video shot in space.

The only reason Chris Hadfield isn't the coolest guy on Earth is that he's not on Earth

A comment by August Vctjuh on YouTube.

# Markdown source view

The source editing plugin also works well with the Markdown output plugin. No special configuration is needed, it is enough to add the plugin to the editor to change the source editing mode to display Markdown instead. Please remember that Markdown syntax is very simple and it does not cover all the rich-text features. Some features provided by CKEditor 5 – either native or introduced via the GHS feature – can thus be only presented as native HTML as they have no Markdown equivalent and will be stripped in the source view below.

The world wide web markup
HTML 5 icon.

The Hypertext Markup Language, most often referred to as simply HTML, is a standard markup language for web browsers. It was first practically implemented by Tim Berners-Lee in 1991, although it was already theoretically designed much earlier, in fact as early as 1980.

The HTML structure

HTML uses elements – called tags – to describe the style and semantics of the content. They are also used to introduce non-textual elements. The tags are shortcodes surrounded by angle brackets.

The types of HTML elements

The semantic tags

The semantic tag would be eg. <h2> elements, describing level 2 headings (there are six levels of these), like the one above. This type of elements needs both an opening and a closing tag – </h2>. Other popular elements of this kind are <p> for paragraphs (like this one) or <a> for links (seen at the beginning).

The content tags

The other type – content tag – includes elements such as <img /> which does not require a closing tag. It is used to include an image in the content.

There are some more HTML tags, that may combine both of these aims. One of these would be the <abbr> tag, which is used to explain abbreviations on hover.

There are other source-related CKEditor 5 features you may want to check:

  • General HTML support – Allows enabling a generic support for additional HTML features not yet covered by official plugins.
  • HTML embed – Allows embedding an arbitrary HTML snippet in the editor.
  • Autoformatting – Allows using Markdown-like shortcodes to format the content on the go.
  • Markdown output – Allows for Markdown output instead of HTML output.

# Installation

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

npm install --save @ckeditor/ckeditor5-source-editing

And add it to your plugin list configuration:

import SourceEditing from '@ckeditor/ckeditor5-source-editing/src/sourceediting';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ SourceEditing, ... ],
        toolbar: [ 'sourceEditing', ... ]
    } )
    .then( ... )
    .catch( ... );

To utilize the Markdown source editing mode just add the Markdown output plugin to the editor.

import SourceEditing from '@ckeditor/ckeditor5-source-editing/src/sourceediting';
import Markdown from '@ckeditor/ckeditor5-markdown-gfm/src/markdown';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ SourceEditing, Markdown, ... ],
        toolbar: [ 'sourceEditing', ... ]
    } )
    .then( ... )
    .catch( ... );

Read more about installing plugins.

# Common API

The SourceEditing plugin registers:

  • The 'sourceEditing' UI button component.

We recommend using the official CKEditor 5 inspector for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.

# Contribute

The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-source-editing.