14-day Cloud trial
Start today. For free.

One editor. 50+ features. Zero constraints. After your trial, retain the advanced features.

Try Professional Plan for FREE
PricingContact Us
Log InGet Started Free

TinyMCE readonly mode

July 27th, 2020

1 min read

Mouse pointer with readonly icon.

Written by

Ben Long

Category

Developer Insights

Demo on CodePen

VIEW

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:

tinymce.activeEditor.mode.set("readonly");

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

tinymce.activeEditor.mode.set("design");

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

VIEW
Configuration
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 InsightsFeb 21st, 2024

    Understanding cross platform app development

Join 100,000+ developers who get regular tips & updates from the Tiny team.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.