How to Set Ckeditor ReadOnly Mode

CKEditor API makes it possible to render the editor content read-only (and thus impossible for the user to edit). Some editor features that will not cause the user to modify the content will still be available, though. This includes, for example, the view of the content source code or features such as preview and editor interface maximization within the browser window.

The most crucial element of the API is the setReadOnly() method which puts the editor into the read-only state and restores it to the editable state.

When the editor goes from the editable into the read-only state, its readOnly property is being set to true (for read-only mode) or false (for editable mode). The readOnly event is also fired after each change of the readOnly property.

This is what CKEditor looks like when it is in read-only mode.

Read-Only Mode on Startup

CKEditor can be configured to open in the read-only mode on startup by setting the CKEDITOR.config.readOnly configuration option to true. For example:

config.readOnly = true;

The same can be achieved by setting the disabled attribute for the <textarea> element that CKEditor replaces.

Read-Only Mode Demo

See also the working “Read-Only Mode” sample that showcases toggling between the read-only and editable mode.