Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by
Medium-style editor with text "Emulate the Medium authoring experience with TinyMCE", displaying formatting toolbar on text selection.

Emulating the Medium editor

Ben Long

May 18th, 2020

Written by

Ben Long
Ben Long

Category

Tips & How-Tos

When it comes to content creation, there are heaps of great experiences out there, including the popular authoring experience provided by Medium.

As developers, we often want to incorporate certain things we like about other experiences into our own applications.

The open source TinyMCE rich text editor is not only powerful and reliable – it’s extremely flexible, enabling you to integrate it with any of your applications, and customize it to achieve the UX you desire for your users.

So, in this article, we’re going to show you how to emulate the Medium authoring experience with TinyMCE.

Complete example on CodePen:

New to TinyMCE?

If you’re new to TinyMCE, you might want to familiarize yourself with it first, and possibly even set up your own instance, before working through the configuration steps in this article. But you don’t need to. For the time being, you can assume you’ve already set it up, and use this TinyMCE CodePen template to follow along.

However, if you are keen to get started with your own instance of TinyMCE, one of the easiest ways is to follow these instructions on how to setup TinyMCE on the cloud. If you’re integrating with a particular framework, we’ve also got detailed articles on how to get started with TinyMCE in React, Angular, and Vue. And there’s plenty more information in the Tiny documentation on getting started with TinyMCE and various other integrations.

1. Start with the basic editor

If you don’t yet have your own instance of TinyMCE running, or you don’t want to play around with your own, here’s a TinyMCE CodePen template you can use to follow along.

Start with the default config; for example, if you’re using the CodePen, in your JS you’ll just need to provide the selector that specifies which element to initialize the editor on:

tinymce.init({
  selector: "#editor"
  // Add editor config options here
});

If you’re using your own instance, this may look slightly different depending on your implementation. For example, if you’re integrating TinyMCE with React using our tinymce-react component, your default config may be coded as follows:

init={{
  // Add editor config options here
}}

Regardless, customizing the editor is simply a matter of adding configuration options to these init scripts.

2. Remove the toolbars

First, we’ll remove the toolbar and menubar by adding both options and setting them to false. At the same time, we’ll enable autoresize so the length of the editor window will increase automatically as we add content.

tinymce.init({
  selector: "#editor",
  menubar: false,
  toolbar: false,
  plugins: "autoresize",
  skin: "snow",
  icons: "thin"
});

If you have access to the Premium Skins and Icon Packs, now is also a good time to choose some – for example, a skin without a border, such as snow, and its accompanying thin icons. (You get a 30 day trial of all the Tiny premium plugins, including skins and icons, when you sign up for a free API key.)

3. Add placeholder text

TinyMCE editor with placeholder text.

I love Medium’s prompt to “Tell your story…”. Everyone has a story to tell! 😀 To add a prompt like that in TinyMCE, simply use the placeholder option.

tinymce.init({
  // ...
  placeholder: "Tell your story..."
});

This is also a good time to style the main font used in the editor. We’ll use the content_style option to add some quick styling.

tinymce.init({
  // ...
  content_style:
    "@import url('https://fonts.googleapis.com/css2?family=Tinos&display=swap'); body { font-family: 'Tinos', serif; font-size: 16pt; color: #292929; }"
});

Find out more about styling fonts in TinyMCE.

4. Add the Medium-style toolbars

TinyMCE editor with quickbars.

We call these quickbars.

Update plugins to include quickbars, as well as any other plugins you need to enable for your toolbar options.

tinymce.init({
  // ...
  plugins: "autoresize quickbars image media table hr"
});

Then configure which options you want to display on the toolbars. The quickbars_selection_toolbar configures options displayed to the user on selecting some text. In this example, we’ll include buttons for bold, italic, insert link, level one and two headers, and blockquote.

tinymce.init({
  // ...
  quickbars_selection_toolbar: "bold italic link | h1 h2 | blockquote"
});

See the documentation for the full list of toolbar controls (and associated plugins). Note that “core” means it’s part of the core functionality, so you don’t need to load it as a plugin.

Medium also has a crosshair that you can click, when starting a new line, to bring up options related to inserting content.

We can do something similar by configuring quickbars_insert_toolbar. In our example, we’ve included options to insert an image, media, table or horizontal rule.

tinymce.init({
  // ...
  quickbars_insert_toolbar: "image media table hr"
});
TinyMCE editor displaying insert options on new line.

As a user, if you don’t want to insert anything from this menu, you can just start typing and the menu will disappear.

NOTE: The quickbars insert toolbar is enabled with a default configuration automatically when you enable the quickbars plugin. To disable the insert toolbar completely, set it to false – quickbars_insert_toolbar: false.

Additional customization

If you’d like to add comments functionality, the Tiny Comments plugin is a premium feature that requires some additional server-side setup and is offered under our Custom plan. We also have options for more advanced media embedding. Contact us for more information.

The editor skin can be customized with our premium Tiny Skins and Icon Packs, or you can create your own TinyMCE skin using the TinyMCE skin tool.

You might also find this article about TinyMCE toolbar configuration helpful.

What next?

If you're not yet familiar with our TinyMCE WYSIWYG HTML editor and how it provides users with a great content creation experience, you can start by checking out the demo on our home page.

For developers, integrating TinyMCE with your own applications is easy. Get a free API Key (including a 30 day trial of all the premium plugins) and get started within minutes.

Or contact us for more information about how to upgrade your existing content platforms to take advantage of the power and simplicity provided by TinyMCE.

DesignTinyMCE
Ben Long
byBen Long

Developer Advocate at Tiny. Computer scientist turned storyteller. Reminisces about programming on the MicroBee. Writes picture books for kids. Also the wearer of rad shoes. “Science isn’t finished until you share the story.”

Related Articles

  • Group of categories and tags made from the section titles within the related article.
    Tips & How-Tos

    16 features to include on your blog feed

    by Ben Long in Tips & How-Tos
Subscribe for the latest insights served straight to your inbox. Delivered weekly.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor