Source editing

The source editing feature lets you view and edit the source of your document.

# Demo

Use the editor below to see the source editing plugin in action. Toggle the source editing mode and make some changes in the HTML code (for example, add a new paragraph or an ordered list). Then leave the source editing mode and see that the changes are present in the document content.

You can also use one of the many CKEditor 5 features available in the toolbar and check how they render in the HTML source. Notice the collapsible table of contents, available thanks to the general HTML support feature. The feature introduces HTML elements not yet covered by the official plugins.

Table of contents

The singing Canadian
Spaceflights
Bibliography
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 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 recognized 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 has flown to space thrice. He has also performed two EVAs (extra-vehicular activity, a spacewalk) that lasted together for 14 hours 53 minutes and 38 seconds.

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.

Rich Text Editor

Table of contents

The singing Canadian
Spaceflights
Bibliography
Space Oddity

The singing Canadian

Spaceflights

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

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.

This demo only presents a limited set of features. Visit the feature-rich editor example to see more in action.

# Additional feature information

The source editing plugin is a low-level document editing interface, while all the buttons and dropdowns located in the toolbar are high-level ones.

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.

# Markdown source view

The source editing plugin also works well with the Markdown output plugin. You do not need any special configuration: just add the plugin to the editor, and the source editing mode will display Markdown instead of HTML.

Remember that Markdown syntax is very simple and does not cover all the rich-text features. This means that some features provided by CKEditor 5 – either native or introduced by the GHS feature – can only be presented as native HTML as they have no Markdown equivalent. Such features will be stripped in the source view below.

Markdown output 🛫

CKEditor 5 can be configured to output Markdown instead of HTML. Markdown is a lightweight markup language that you can use to add formatting to plain text documents. Use the Source button to check and edit the Markdown source code of this content.

The editor-produced Markdown output supports most essential features, like links, different kinds of emphasis, inline code formatting, or code blocks:

p {
    text-align: center;
    color: red;
}

Markdown input 🛬

Thanks to the autoformatting feature, you can use Markdown syntax when writing. Try it out - use these (or any other) Markdown shortcuts in the editor to format the content on the fly 🚀!

Inline formatting	Shortcut
Bold	Type `**` or `__` around your text.
Italic	Type `*` or `_` around your text.
`Code`	Type `ˋ` around your text.
~~Strikethrough~~	Type `~~` around your text.

Shh! 🤫 Markdown has very basic support for tables. Some advanced table-related features like table or cell styling were disabled in this demo.

Block formatting

You can also use Markdown to create various text blocks, such as:

Block quotes - Start a line with ﹥ followed by a space.
Headings:
1. Heading 1 - Start a line with # followed by a space.
2. Heading 2 - Start a line with ## followed by a space.
3. Heading 3 - Start a line with ### followed by a space.
Lists, including nested ones:
- Numbered lists - Start a line with 1. or 1) followed by a space.
- Bulleted lists - Start a line with * or - followed by a space.
- To-do lists - Start a line with [ ] or [x] followed by a space to insert an unchecked or checked list item.
Code blocks - Start a line with ˋˋˋ.
Horizontal lines - Start a line with ---.

Rich Text Editor

Markdown output 🛫

The editor-produced Markdown output supports most essential features, like links, different kinds of emphasis, inline code formatting, or code blocks:

p {
    text-align: center;
    color: red;
}

Markdown input 🛬

Thanks to the autoformatting feature, you can use Markdown syntax when writing. Try it out - use these (or any other) Markdown shortcuts in the editor to format the content on the fly 🚀!

Shh! 🤫 Markdown has very basic support for tables. Some advanced table-related features like table or cell styling were disabled in this demo.

Block formatting

You can also use Markdown to create various text blocks, such as:

Block quotes - Start a line with ﹥ followed by a space.
Headings:
1. Heading 1 - Start a line with # followed by a space.
2. Heading 2 - Start a line with ## followed by a space.
3. Heading 3 - Start a line with ### followed by a space.
Lists, including nested ones:
- Numbered lists - Start a line with 1. or 1) followed by a space.
- Bulleted lists - Start a line with * or - followed by a space.
- To-do lists - Start a line with [ ] or [x] followed by a space to insert an unchecked or checked list item.
Code blocks - Start a line with ˋˋˋ.
Horizontal lines - Start a line with ---.

# Installation

Currently, the source editing mode is supported in the classic editor. The source editing feature can be used with CKEditor 5 collaboration features except for CKEditor 5 real-time collaboration. If you would like to use the real-time collaboration mode and, for some reason, you would like to also enable source editing, please contact us.

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';

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';
import { Markdown } from '@ckeditor/ckeditor5-markdown-gfm';

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

# 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 at https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-source-editing.

Every day, we work hard to keep our documentation complete. Have you spotted outdated information? Is something missing? Please report it via our issue tracker.

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

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

Source editing

# Demo

The singing Canadian

Spaceflights

Bibliography

Space Oddity

The singing Canadian

Spaceflights

Bibliography

Space Oddity

# Additional feature information

# Markdown source view

Markdown output 🛫

Markdown input 🛬

Block formatting

Markdown output 🛫

Markdown input 🛬

Block formatting

# Installation

# Related features

# Common API

# Contribute