CKEditor 5: the best open source Markdown editor

CKEditor is an open source rich-text editor. Even though it is mostly developed by CKSource, it has a large community of contributors backing the development efforts. One of the popular questions that we receive time and time again is the availability of Markdown editing. The simple answer is yes. Let’s dive a little deeper into this topic to get a more elaborate answer as to how.

# Markdown - the syntax of the programming community

Markdown is, putting things simply, a text formatting syntax. For over 15 years it has offered an easy and efficient way to convert plain text into HTML with the help of shortcodes. The syntax provided by this Perl-based converter is easy to remember and easy to employ as you write. This is probably the most important reason why Markdown has gained considerable popularity.

It was used mostly by programmers and developers at first. As the docs as code philosophy gained popularity over time, more and more people employed Markdown in their daily work, appreciating the ease of use and the speed it offers. Technical writers, bloggers and other people dealing with online writing joined the ranks of users. I myself have quickly adopted Markdown in my daily endeavors. Even though I had never used it before, working with both raw HTML and rich-text editors instead, I grasped the brilliantly simple idea and grew to love it within just a few hours.

The employment of Markdown editing by GitHub, one of the largest developer communities in the world, also aided its popularity. This MD variety is often referred to as GFM — “GitHub Flavored Markdown”. It is one of several popular approaches to the syntax, as Markdown is hardly standardized and rather flexible. There is an attempt toward creating a common standard called CommonMark, but its implementation is not yet widespread.

# CKEditor 5 - an advanced editing framework

CKEditor 5 is the newest installment in our series of online WYSIWYG editors. The first version was designed by Frederico Caldeira Knabben, founder of CKSource, back in 2003, and quickly gained popularity within the open source community. CKEditor 3 and CKEditor 4 followed promptly, earning well-deserved praise. 2018 saw the advent of a brand new product: CKEditor 5. The software was rewritten from scratch, getting rid of technical debt and employing a modern programming approach, custom data model, and MVC architecture.

The CKEditor 5 WYSIWYG editor is, in fact, an editing framework that allows for atomic, modular builds aimed at satisfying the end-user’s needs, whatever they may be. A plethora of features provided by a number of plugins support different solutions and approaches. The software produces a rich HTML output by default, but thanks to the employment of a custom data model, it also allows other outputs and can easily become a full-fledged Markdown editor.

# Producing Markdown output

CKEditor 5 outputs the content as a rich HTML, but the dedicated Markdown plugin makes the editor output Markdown instead. Since there is little in terms of an official MD specification, a decision was made to use GitHub Flavored Markdown for this output.

The plugin is not included in the official builds so you need to create a custom build or use the online builder to add it. Once enabled, it makes CKEditor 5 treat Markdown as its source and offers fully functional Markdown output while working in a WYSIWYG editor.

The huge benefit of using a WYSIWYG editor to write in Markdown is that you can see the content getting its shape live, as you type, which makes it much more pleasant to work with. In basic Markdown editors the content is less readable since the text is interspersed with various syntax markers such as # or **. To see the final result, you usually need to check the preview which parses Markdown syntax and shows it properly formatted. However, when you configure a WYSIWYG editor such as CKEditor 5 as a Markdown editor, you totally omit the “preview” stage — what you write gets formatted and output live as you type it using Markdown syntax.

Markdown content can be produced both using the WYSIWYG editor UI as well as from Markdown input that the editor formats on the go. Moreover, the Markdown content can be loaded into the editor from a database and then output, allowing processing of preformatted content with CKEditor 5 Framework. This means that already existing Markdown documents can be fed to the editor almost effortlessly.

This allows for great portability of content and interoperability with other applications that accept and produce Markdown content such as some note taking apps or software development platforms.

# Bouncing between WYSIWYG editing and the Markdown syntax

Markdown input is provided by the customizable autoformatting feature, which offers a simple syntax to format the content as you write. This feature, enabled by default in all CKEditor 5 builds, offers the Markdown syntax ready to use on the go, employing all the familiar shortcodes like * for bulleted lists, ` for inline code or > for block quotes. The plugin makes writing and editing so much faster for everybody, Markdown and WYSIWYG lovers alike, speeding up the workflow and boosting efficiency.

The feature supports most of the common syntax for inline formatting (like bold, italics, underline) and block formatting (like headings, lists or code blocks). Any developer, programmer or technical writer can use their daily solution for effective and fast writing and editing. The wonderful features of rich-text editing can be employed when simple Markdown syntax is not enough. And all of that with the use of just one editing framework!

Compare both input methods below:

# GitHub Writer - a Markdown editor case study

Let’s now have a look at a practical implementation of Markdown support in CKEditor 5 WYSIWYG editor.

By default, GitHub employs Markdown syntax in its editing area. Whether it be pull requests, issues or comments, the editing dialog allows you to use the fast-paced solution as you write. This is fine for most users, but when it comes to editing more advanced content like tables or nested lists, these are not always supported by the Markdown syntax nor necessarily easily achieved.

Addressing this drawback, Frederico Knabben, the original creator of CKEditor, came up with a browser extension called GitHub Writer available for Firefox and Chrome. It changes the standard GitHub editing window into a full-scale WYSIWYG editor, thanks to the magic of CKEditor 5 Framework. Once enabled, it offers the user a familiar and handy user interface, while still producing Markdown output processed by the GitHub backend.

This serves three main purposes:

• First, it offers a better, richer editing experience. This could mean, for example, easy adding and further editing of tables in contrast to the complexity of the same feature in Markdown.
• At the same time, it retains the simplified syntax and produces properly formatted text documents all the same.
• It also allows you to be more efficient as you no longer need to switch between the preview tab and the editor tab to review your content and fix it. You immediately see it in its final form live in the editor.

# CKEditor 5 WYSIWYG editor - the ultimate Markdown editor?

This special duo of CKEditor 5 plugins supporting Markdown input and output can easily turn an open source WYSIWYG editor into a fully functional Markdown editor, addressing the needs of both technical and supporting staff. Coupled with collaboration features, easy adding of tables and a plethora of other functions, it brings developers, programmers and documentalists together to the table with the non-technical personnel. This was exactly the case with Renku, the Swiss Data Science Center platform. It brought together editors from different backgrounds, offering the UI they preferred.

Thanks to the wonder of accepting both WYSIWYG UI and Markdown syntax input, CKEditor 5 allows all collaborators to work whichever way they like, not having to give up their habits and friendly editing environment. This results in documents and data compliant with the demands of programming solutions. In the end, the content received is a proper Markdown-formatted output.

Whether you are a programmer familiar with the GitHub way of doing things, a technical writer faithful to the docs-as-code philosophy or a social media marketing manager in touch with the development department, there is a simple and effective solution for all of you to work together. It’s called CKEditor 5 and it may be quite possibly the most flexible and accessible Markdown editor available, offering both online and in-app solutions for everyone. Or why not try out a real online Markdown editor built on top of CKEditor 5 Framework?