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

Add placeholder text to TinyMCE

Ben Long

May 4th, 2020

Written by

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
byBen Long

Computer scientist, storyteller, teacher, and an advocate of TinyMCE. 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

  • How-tos & Tutorials

    How to get customer feedback (and what to do with it)

    by Qiran Gabrielle-Grace in How-tos & Tutorials
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© 2021 Tiny Technologies Inc.TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.

Products

  • TinyMCE
  • Tiny Drive
  • Customer Stories
  • Pricing