Geek Answers Handbook

CKEditor ReadOnly

I am having a problem since I am using CKEditor ( http://ckeditor.com/ ). The problem is that I cannot find a way to make the ReadOnly editor, and I cannot just use a text field because I want to keep the sequence. I have already seen such questions in StackOwerflow, but none of them work or are too old.

My code so far is only for displaying / initializing 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 am using the latest version of CKEditor (v.4.1.1 Full package)

Thanks in advance!:)

+4
source share
6 answers

In readOnly docs, you can set the configuration to read only

 config.readOnly = true;

There is also an example that shows how to configure it using the method

 editor.setReadOnly( true);
+7
source

try with the 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>
+2
source

have you tried this

they say it 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">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</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>
+1
source

Check this. The idea is that if a user logs in to a system with a classification other than "BPPA", the CK editor should be disabled and read-only. If the user classification is BPPA, the CK editor can be edited. Note that these fractional parts of the code are actually in PHP. They need a working database to work, but I thought you could get this idea and be able to work with your magic.

 <?php //This line is to disable PART A if classification != 'BPPA' $bppa = mysql_query("SELECT * from roles WHERE username = '$_SESSION[username]'"); $bppa_row = mysql_fetch_array($bppa); if($bppa_row['classification'] != 'BPPA'){ $disabled = 'disabled = "disabled"'; }else{ $disabled = ""; } //ends here ?>

Then apply $ disable to your text area:

 <?php echo '<textarea class="ckeditor" '.$disabled.' name="content' . $n . '" id="content' . $n . '">' . $saved . '</textarea>'; ?>
0
source

with version 4.5.4 you can do this with

 $('#idElement).ckeditorGet().setReadOnly(true);
0
source

More articles:


All Articles