Markdown output

The GFMDataProcessor class implements a data processor which changes CKEditor output from HTML to Markdown. This means that you can set or get data from the editor in the Markdown format:

editor.getData(); // -> 'This is [CKEditor 5](https://ckeditor.com).'

editor.setData( 'This is **bold**.' );

“GFM” stands for “GitHub Flavored Markdown” — a Markdown dialect used by GitHub. Markdown lacks any formal specification and has many dialects, often incompatible with each other. When converting the output produced by this data processor make sure to use a compatible Markdown to HTML converter (e.g. the marked library).

This feature is experimental!

While the CKEditor 5 architecture supports changing the data format, in most scenarios we do recommend sticking to the default format which is HTML (supported by the HtmlDataProcessor). HTML remains the best standard for rich-text data.

And please do remember – using Markdown does not automatically make your application/website secure.

# Installation

To enable this data processor in your editor install the @ckeditor/ckeditor5-markdown-gfm package:

npm install --save @ckeditor/ckeditor5-markdown-gfm

Then, you can enable this data processor by creating a simple plugin which will load it:

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
// ...

import GFMDataProcessor from '@ckeditor/ckeditor5-markdown-gfm/src/gfmdataprocessor';

// Simple plugin which loads the data processor.
function Markdown( editor ) {
    editor.data.processor = new GFMDataProcessor();
}

ClassicEditor
    .create( document.querySelector( '#snippet-markdown' ), {
        plugins: [
            Markdown,

            Essentials,
            Bold,
            Italic,
            // ...
        ],
        // ...
    } )
    .then( ... )
    .catch( ... );

# Demo

Rich Text Editor

This is CKEditor 5.

Output:

# Contribute

The source code of this feature is available on GitHub in https://github.com/ckeditor/ckeditor5-markdown-gfm.