Start trial
Plans & PricingContact Us
Log InStart For Free

An inline editor for any application

August 1st, 2022

5 min read

Text "HTML inline editing" with inline editor displayed below.

Written by

Joe Robinson

Category

How-to Use TinyMCE

Unsurprisingly, 88% of online shoppers say they’d leave a website and not return, if they have a bad user experience. So, when you ask me how important user experience (UX) and user interfaces (UI) are…the answer is, they’re critical.

UX and UI mean everything to your users, and can make or break a product. Therefore, they should be an important consideration – regardless of whether you’re  building from scratch or upgrading your existing product. However, tackling such a big area can be overwhelming, so breaking it down into smaller tasks – like just focusing on one part of the overall UI – is a great place to start.. For instance, you could look at the rich text editor in your app and see where that can be upgraded to improve the UI for users – you could try using an inline editor design.

An inline editor is the preferred UX for applications built for users who create  engaging, informative, or conversion-driving content. The TinyMCE rich text editor has that inline ability and our docs provide a wealth of information on its inline editor capabilities.

This article explains  how to set up inline editing. It takes only a few lines of code to change TinyMCE from a standard rich text editor into an inline editor.

What is inline editing?

Inline editing changes the way you edit text in the textarea of an editor. When using inline editing, you don’t have to switch between a “view” mode and an “edit” mode. There's also changes to the toolbar.

Typically when you edit text, the toolbar presents itself and along the toolbar, there are editing and formatting options. When using inline editing mode, the toolbar is minimal, or can be hidden altogether from view.

What is inline editing useful for?

The most useful part of inline editing is the time saved by not switching between editing and viewing mode, and the simplified interface with a toolbar that is minimal, or out of the way altogether.

An Email marketing application, is one example of useful inline editing. In an email application, inline editing saves time, and helps you get directly to writing your message. The email toolbar is kept at the end of the email message (usually) and is smaller than a standard rich text editor toolbar.

Inline editing is also useful for its versatility. 

When TinyMCE’s inline editing mode activates, it can work on any HTML element on the page. Do you need headings, text boxes, input elements, or something else as a textarea? Activate inline editing mode, and you can directly edit text or write content.

Inline editing example

Here’s how inline editing looks in action. The following is a marketing email tool built with TinyMCE inline editor activated:

And the following is a still image of the demo:

Inline editing in an email marketing app built with TinyMCE.

How to enable the inline editor in your app

You might already have an HTML page you want to add inline editing to, but for the purpose of this tutorial, start out with a simple HTML file.

  1. On your developer workstation, create a new folder and add an index.html file inside the folder

  2. Copy and paste the following HTML into the file:

<!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>
  1. Save the changes

Add HTML inline editor with TinyMCE

  1. Sign up for a TinyMCE account to get your API key.

When you use this key, you get access to Premium TinyMCE plugins for 14 days, as well as no warning messages concerning API keys in the text area.

  1. 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:

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<script>
 tinymce.init({
   selector: "#mydiv",
   inline: true,
   menubar: true
 });
</script>
  1. Remove the menu bar by setting it to “false”.

Also note that the value provided for selector matches the id of the div added in the previous procedure.

Note: Although TinyMCE initializes on any element, inline editing can only be initialized on a div. You may need to add one to your HTML if you don’t have one already.

  1. Save the 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.

If you run into the following error “This domain is not registered with Tiny Cloud” then this means you are running TinyMCE 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 app domain as an approved domain in your account.

Customizing the toolbar

TinyMCE comes with options you can customize, whichcan include different functionalities and features. Or, you may only want the options available to select style, bold, italics, color, and remove the formatting option.

Here’s how to make this toolbar configuration:

  1. Add a toolbar with the following plugins:

tinymce.init({
 selector: "#mydiv",
 inline: true,
 menubar: false,
 toolbar: "styleselect | bold italic forecolor | removeformat"
});
  1. Save the changes, and reload the editor: 

Inline editor with customized toolbar.

 

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

How to configure a Quickbar experience

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

medium editor working with highlighting and inline

The quickbars feature can be added by configuring the quickbars plugin and its associated toolbar options.

  1. Re-configure the TinyMCE init script with the following:

tinymce.init({
  selector: "#mydiv",
  inline: true,
  plugins: ["quickbars"],
  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?

TinyMCE offers you exactly the solution you need so your own product offers your users the best content creation experience. 

Where can you go next with inline editing?

From here, you have even more options for tweaking the UI/UX of your application:

  • 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
  • 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.

Another major next step you can take – integrate an inline editor into one of the popular frameworks for building your website or app:

Contact TinyMCE if you need more information about inline editing!

 

 

Inline EditingDesignEmail MarketingProductivity
byJoe Robinson

Technical and creative writer, editor, and a TinyMCE advocate. An enthusiast for teamwork, open source software projects, and baking. Can often be found puzzling over obscure history, cryptic words, and lucid writing.

Related Articles

  • How-to Use TinyMCENov 21st, 2024

    What are Line Breaks? Learn How to Add and Remove Them

Join 100,000+ developers who get regular tips & updates from the Tiny team.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Tiny logo

Stay Connected

SOC2 compliance badge

Products

TinyMCEDriveMoxieManager
© Copyright 2024 Tiny Technologies Inc.

TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.