Start trial
PricingContact Us
Log InStart For Free

TinyMCE inline option not working? FAQ and Solutions series

February 15th, 2022

2 min read

TinyMCE inline option is not working because textarea elements don’t work with inline mode. Use a div or another HTML element.

Written by

Joe Robinson

Category

How-to Use TinyMCE

A good-looking text editor that fits your application design does not always need a menubar. In fact, depending on your design choices, an editor with a concealed menu or toolbar completely changes the user experience. 

Discoverability is an issue when designing with an inline editor. You might be asking yourself, Is the page design familiar to the viewer? Are the logical elements grouped together so the viewer can follow them? Any eye-catching animations added or taken out?

But what if inline mode just isn’t working in your website design? As in, you configured it, but frustratingly it just won’t appear in the preview.

This guide explains how to solve the problem of TinyMCE inline option not working, and what to look out for after you get inline mode working.

The one component to look for – do not use textarea

The first step is to open the index.html file, and check where you are placing TinyMCE. The specific tag that you’ve selected for TinyMCE to replace with a text editor, is the important part to look for (and find).

First of all, confirm that you have inline mode active, for example:

<script src="https://cdn.tiny.cloud/1/add-an-apikey-here/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>
        tinymce.init({
        selector: '.tinymce-heading',
        menubar: false,
        inline: true,
        plugins: [
          'lists',
          'powerpaste',
          'autolink'
        ],
     toolbar: 'undo redo | bold italic underline',
  )}
</script>

You may notice that the selector is different from the ‘textarea’ usually specified.

TinyMCE inline mode only works on elements other than a textarea. Use a div, or other HTML tag, and set up a class name or id to apply TinyMCE to the element.

Once you’ve set up the selector with a class, you can apply it to a target element. This will enable inline mode to start working. Here’s an example – TinyMCE running in a heading tag:

<h2 id="tiny-inline" class="tiny-heading">Tiny Running in Heading 2, with inline: true</h2>

And the CSS styling the tag:

h2 {
    color: #1976D2;
    text-align: center;
    font-size: 2em;
    margin-bottom: 0;
    margin-top: 0;
    line-height: 40px;
  }

The result:

TinyMCE inline mode needs an html element other than textarea to work on. For example

Controlling CSS and styling

Ordinarily, the TinyMCE text editor has its own stylesheets, and these set the rules for how content in the text editor looks. That’s not the case with inline mode. Instead, the text editor content changes based on the CSS.

Take the CSS in the previous example. Altering the class name can completely change the style and appearance of the concealed, inline rich text editor. For example, a web page could have a button that toggles from light to dark mode. The rich text editor can receive the class and new styles as the user toggles:

If you change the CSS

Final thoughts on TinyMCE inline

Make sure you check what element and selector you have inline mode configured with – a textarea element doesn’t work with inline mode. Instead, use a div or another class to start using inline mode.

As for the issues of discoverability when using an inline editor, another option is to consider the value of iconography. Writing icons can be a powerful tool for directing a user to an inline editing field.

For more information on design, and building a web page with TinyMCE as your rich text editor, review our documentation, and sign up for a FREE API key to start testing out features like the inline editor mode. And be sure to apply the Tiny selector to any HTML element other than the textarea tag!

Inline EditingDesign
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 TinyMCEOct 10th, 2024

    How to Use AI Prompts for Content Creation in TinyMCE

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.