Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by
Screenshot of TinyMCE editor with placeholder text.

Add placeholder text to TinyMCE

Ben Long

May 4th, 2020

Written by

Ben Long
Ben Long

Category

How-tos & Tutorials

Tagged

VIEW

Sometimes, as part of your form designs, you'll want to include placeholder text to assist your users.

Placeholder text is usually used on forms as a prompt:

Placeholder text reading

Or to show an example of the expected input:

Placeholder text reading

TinyMCE is used in online apps and forms to provide a rich text editing experience. It’s highly flexible, so developers can configure it to achieve their desired UX. This includes having the ability to add placeholder text when required. If you’re new to TinyMCE, find out more information about our rich text editor.

The placeholder option

With the release of TinyMCE 5.2, you can now provide placeholder text within the editor.

TinyMCE configured with placeholder text.

To add placeholder text, add the placeholder option to the TinyMCE initialization script along with the text you want to display. For example:

tinymce.init({
  selector: "textarea",
  placeholder: "Ask a question or post an update...",
  menubar: false,
  skin: "outside",
  toolbar_location: "bottom"
});

See the demo

Click in the box to get started...

What next?

While we’re on the topic of customization, check out these blog posts for more information on customizing TinyMCE to enhance the overall UX of your apps:

Not yet using TinyMCE on the cloud? When you’re on the cloud, you’ll always be up to date with the latest build and newest features. Get a free API Key and try it out (you’ll also get a free trial of our premium plugins!)

TinyMCE
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

  • Text "Insert Template" with corresponding icon above.
    How-tos & Tutorials

    Making the most of templates in TinyMCE

    by Marty Friedel in How-tos & Tutorials
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