Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by

TinyMCE inline option not working? FAQ and Solutions series

Joe Robinson

February 15th, 2022

2 min read

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 TinyMCE

    How to configure URL validation in your app

    by Joe Robinson in How-to Use TinyMCE
Subscribe for the latest insights served straight to your inbox every month.

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
Tiny logo
Privacy Policy - Terms of Use© 2022 Tiny Technologies Inc.TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.

Products

  • TinyMCE
  • Tiny Drive
  • Customer Stories
  • Pricing