Blueprint by Tiny
Return to
Return to Tiny.cloudTry TinyMCE for Free
Search by
Mouse pointer with readonly icon.

TinyMCE readonly mode

Ben Long

July 27th, 2020

Written by

Ben Long
Ben Long


How-tos & Tutorials

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.

Stay tuned for more articles on these topics from our guest authors in the coming weeks. 

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

Demo on CodePen

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