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

TinyMCE readonly mode

Ben Long

July 27th, 2020

1 min read

Written by

Ben Long


Developer Insights

Demo on CodePen


If you’re using the TinyMCE WYSIWYG editor as the text entry component in your apps, sometimes you may want to set the whole editor to be readonly. 

For example, consider the scenario in which a user navigates to edit a page that is already being edited. Where real-time collaboration is not an option, you might show the page but lock down the editor so no changes can be made.

In this case, you can set the editor to readonly using set() with a value of "readonly". For example:


Conversely, you can revert the editor back to being editable by setting it to "design". For example:


To demonstrate, here’s a CodePen with a checkbox that makes use of the editor mode API. I’ve also taken the opportunity to demonstrate dark mode and the use of Google Fonts within the editor - and to use an excerpt from The War of the Worlds 😜

What about noneditable content?

You may also be interested in the Noneditable plugin that allows you to lock down certain parts of the content and not others. This can be particularly useful when used with the Template plugin, enabling users to create content faster with predefined templates while at the same time preventing them from making unwanted edits to boilerplate text.

Check out these related blog posts for a more in-depth discussion about these plugins with examples of both:

What next?

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 14-day trial of our premium plugins!)

Demo on CodePen

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

  • Developer Insights

    Managing technical debt is difficult in rich text editors

    by Millie Macdonald in Developer Insights
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.


  • TinyMCE
  • Tiny Drive
  • Customer Stories
  • Pricing