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:
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!)