I got a problem since I use the CKEditor (http://ckeditor.com/). The problem is that I can't find a way to make the editor ReadOnly and I can't just use a textarea since I want to keep consistency. I've already seen lots og questions like this at StackOwerflow, but none of them work or are too old.
My code so far is only to display/initialize the editor:
$(document).ready(function(){
CKEDITOR.replace( 'ckeditor', {
on: {
// Check for availability of corresponding plugins.
pluginsLoaded: function( evt ) {
var doc = CKEDITOR.document, ed = evt.editor;
if ( !ed.getCommand( 'bold' ) )
doc.getById( 'exec-bold' ).hide();
if ( !ed.getCommand( 'link' ) )
doc.getById( 'exec-link' ).hide();
}
}
});
});
I use the newest CKEditor version(v.4.1.1 Full package)
Thanks in advance! :)
In the docs readOnly you can set the config to readOnly
config.readOnly = true;
There is also an example that shows setting it via a method
editor.setReadOnly( true);
try with following lines,
<textarea id="editor1" name="editor1" ></textarea>
<textarea id="editor2" name="editor2" ></textarea>
<input type="button" onclick="EnableEditor2()" value="EnableEditor2" />
<script>
$(document).ready(function () {
//set editor1 readonly
CKEDITOR.replace('editor1', {readOnly:true});
CKEDITOR.replace('editor2');
//set editor2 readonly
CKEDITOR.instances.editor2.config.readOnly = true;
});
function EnableEditor2() {
CKEDITOR.instances.editor2.setReadOnly(false);
}
</script>
have you tried this ?
they say, that this should work
var editor;
// The instanceReady event is fired, when an instance of CKEditor has finished
// its initialization.
CKEDITOR.on( 'instanceReady', function( ev )
{
editor = ev.editor;
// Show this "on" button.
document.getElementById( 'readOnlyOn' ).style.display = '';
// Event fired when the readOnly property changes.
editor.on( 'readOnly', function()
{
document.getElementById( 'readOnlyOn' ).style.display = this.readOnly ? 'none' : '';
document.getElementById( 'readOnlyOff' ).style.display = this.readOnly ? '' : 'none';
});
});
function toggleReadOnly( isReadOnly )
{
// Change the read-only state of the editor.
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#setReadOnly
editor.setReadOnly( isReadOnly );
}
and html
<form action="sample_posteddata.php" method="post">
<p>
<textarea class="ckeditor" id="editor1" name="editor1" cols="100" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea>
</p>
<p>
<input id="readOnlyOn" onclick="toggleReadOnly();" type="button" value="Make it read-only" style="display:none" />
<input id="readOnlyOff" onclick="toggleReadOnly( false );" type="button" value="Make it editable again" style="display:none" />
</p>
</form>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With