CKEditor ReadOnly

Question

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! :)

Answer 1

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);

Answer 2

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>

Answer 3

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">&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>

Answer 4

Sources :

http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.readOnly http://rev.ckeditor.com/ckeditor/trunk/7657/_samples/readonly.html

CKEDITOR.config.readOnly = true;

Answer 5

Check this one out. The idea is if a user logs in a system with a classification other than 'BPPA', the CK editor shall be disabled and read-only. If the classification of a user is BPPA, thus the CK editor is editable. Note that these code fractions are actually in PHP. They need a working database to work but I figured you might get the idea and be able to work your own 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>';
?>

Answer 6

with version 4.5.4 you can do it with:

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