Set read-only mode

Puts or restores the editor into readonly state. When editor in read-only, the user is not able to change the editor content throught wysiwyg and throught source editor, but can still use some editor functions (fullsize, print, show source code).

<link type="text/css" rel="stylesheet" href="build/jodit.min.css" />
<script type="text/javascript" src="build/jodit.min.js"></script>
Copy

const editor = Jodit.make('#editor', {
	readonly: true
});

editor.events.on('readonly', function (isReadOnly: boolean) {
	console.log('Current state:' + isReadOnly);
});

editor.setReadOnly(false); // this method firing the `readonly` event.
editor.setReadOnly(true);
console.log(editor.getReadOnly());

// toggle read-only
editor.setReadOnly(!editor.getReadOnly());
Copy

by default in readonly state it shows all buttons, but almost all of them are disabled. Only the source,print,fullsize,about and dots buttons work. But you can set your own buttons list:

const editor = Jodit.make('#editor', {
	readonly: true,
	activeButtonsInReadOnly: ['source', 'about'] // active only two buttons
});
Copy

Result

<!-- Example Start -->
<textarea id="dummy" cols="30" rows="10">
&lt;div>
&lt;img src="https://xdsoft.net/jodit/finder/files/pexels-kei-scampa-4507967.jpeg" style="width: 301px; float: right; margin-left: 15px; margin-top: 10px;">
&lt;/div>
&lt;ul>
&lt;li>Copy/Paste image&lt;/li>
&lt;li>Drag&amp;Drop &lt;/li>
&lt;li>Free for non-Commercial &lt;a href="license.html">Read more</a> &lt;/li>
&lt;li>ACE editor out of the box &lt;/li>
&lt;li>Pure TypeScript. No libraries&lt;/li>
&lt;li>Lightweight: ~63.63kB gzipped.&lt;/li>
&lt;/ul></textarea
>
<button
	type="button"
	onclick="Jodit.instances.dummy.setReadOnly(!Jodit.instances.dummy.getReadOnly())"
>
	Toggle read-only
</button>

<script>
	const editor = Jodit.make('#dummy', {
		readonly: true
	});
</script>
<!-- Example End -->
Copy