Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by
Text "HTML inline editing" with inline editor displayed below.

An inline editor for any application

Ben Long

August 31st, 2020

Written by

Ben Long
Ben Long

Category

Design & UX

An inline editor is the preferred UX for many applications built for users who are creating engaging, informative, and converting content online.

When you are building or upgrading your products to disrupt the market and lead the next generation of transformative technologies, it’s crucial that you think about the best way for your users to interact with it.

In this article, we discuss what inline editing is, and how to build an inline editor into your applications with just a few lines of code. More information about our inline editor is available in our docs.

What is inline editing?

Inline editing allows users to edit content displayed in HTML pages directly without having to switch between an edit mode and a view mode.

Typically, users can edit more than just the text - they are presented with a menu or toolbar, allowing them to format the content as well.

Inline editing is often used in email marketing applications, so users can see exactly how their content will look while they are writing it.

Inline editing in an email marketing app built with TinyMCE.

Get started with an inline editor in your apps

You might already have an HTML page you want to add inline editing to, but for the purpose of this tutorial, let’s start out with a simple HTML file that has a single div with a heading and paragraph.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div id="mydiv" style="margin: 50px">
      <h1>Hello!</h1>
      <p>Are you interested in a pair of...</p>
    <div>
  </body>
</html>

Add the inline editor

Import and initialize the editor on your page by adding the following code within the head section <head>...</head> of the file, replacing no-api-key with your own Tiny API key. (If you don’t already have one, you can get a free API key now.)

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>
  tinymce.init({
    selector: "#mydiv",
    inline: true,
    menubar: false
  });
</script>

TinyMCE is extremely flexible and customizable, so there are loads of configuration options you can throw at it at this point, but to keep things simple for now, we’ve just removed the menu bar by setting it to false. Also note that the value we’ve provided for selector matches the id of the div that we want to initialize the editor on.

Note that, although TinyMCE can typically be initialized on any element, inline editing can only be initialized on a div. So you may need to add one to your HTML if you don’t have one already.

After you’ve made these changes, refresh your browser, and click on the text. You’ll be able to edit the text, and the toolbar will appear, providing more formatting options too.

Inline editor.

NOTE: You will be presented with a warning notification - This domain is not registered with Tiny Cloud - if you are running TinyMCE on your local machine outside of a web server, or if the domain on which you’re running TinyMCE is not registered against your account. To remove the notification, open it on localhost (which is already an approved domain by default), or register your domain as an approved domain in your account.

Customizing the toolbar

TinyMCE comes with loads of options that you can add and remove as needed. For example, you might want only the options to select style, bold, italics, color, and remove formatting. You’d do this by overriding the default toolbar configuration as follows:

tinymce.init({
  selector: "#mydiv",
  inline: true,
  menubar: false,
  toolbar: "styleselect | bold italic forecolor | removeformat"
});

Alternatively, you might like to configure it with a lot more options. Check out our article on how to customize the TinyMCE toolbar for more information on configuring it for your application.

Inline editor with customized toolbar.

Quickbars

In some cases, you might want to emulate the Medium experience, where the toolbar shows up only once you’ve highlighted some text.

We call this feature quickbars, and it’s added by configuring the quickbars plugin and its associated toolbar options; for example:

tinymce.init({
  selector: "#mydiv",
  inline: true,
  quickbars_selection_toolbar:
    "styleselect | bold italic forecolor | removeformat",
  quickbars_insert_toolbar: false,
  menubar: false,
  toolbar: false
});
Inline editor with Medium-style toolbar.

Enhance your email marketing software

Looking to build or upgrade your email marketing products to stay competitive?

If you want to provide your users with the best content creation experience, with the most trusted inline editor on the market, there are a lot more tips and tricks in our related article on how to get started with TinyMCE in your email marketing software.

What next?

From here, you have even more options for tweaking the UI/UX of your application to be the best it can be:

  • Customize the toolbar skin and icons to match your design system - choose from our premium package of skins and icons or design your own using our skin tool
  • Add options for users to insert links, images, and other media - check out our plugins page and scroll down to see all 40+ core plugins
  • Add premium features such as enterprise spell checking, link checking, and accessibility checking - available with our Cloud Professional plan - start with a free 14 day trial
  • Or check out our comprehensive Tiny documentation for more configuration information.

It’s easy to integrate our inline editor with your favorite frameworks. Here are some guides we’ve put together on the most popular frameworks:

Contact us and let us know what you’re building - we love working with developers and product owners to provide the best and most innovative content creation experiences around.

Inline EditingDesign
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

  • Menu options - File Edit View Insert Format Tools Table - with love heart above.
    Design & UX

    Learning to love the menu

    by Marty Friedel in Design & UX
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