CODEWITHSUNDEEP
javascripthtmlckeditor
rockhopper
rockhopper

Reputation: 85

CKEditor ReadOnly

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

Upvotes: 5

Views: 27636

Answers (9)

Hey Bey
Hey Bey

Reputation: 1

I had this problem and struggled to fix it for a very long time. For me, I found that even if readOnly = true, the readOnly properties shown in the demo won't work (such as not being able to edit).

So I found that you could override it with:

editor.editing.view.change(writer => {
      writer.setAttribute('contenteditable', 'false', editor.editing.view.document.getRoot());
    });

Here is an example:

ClassicEditor
  .create(document.querySelector('#written-text'), {
    toolbar: {
      items: []
    },
    language: 'en',
    readOnly: true
  })
  .then(editor => {
    nonEditableEditorInstance = editor;

    editor.editing.view.change(writer => {
      writer.setAttribute('contenteditable', 'false', editor.editing.view.document.getRoot());
    });
    console.log(editor);
  })
  .catch(error => {
    console.error(error);
  });

Upvotes: 0

Eve
Eve

Reputation: 806

In case you have several editors on the same page and you want to disable all of them on the page display :

CKEDITOR.on('instanceReady', function (ev) {
    ev.editor.setReadOnly(true);
});

Documentation

Upvotes: 0

Sully
Sully

Reputation: 417

In version 5 i do this:

ClassicEditor
    .create( document.querySelector( '.editor' ), {
        removePlugins: ['Title'],
        licenseKey: '',

    } )
    .then( editor => {
        window.editor = editor;
        editor.isReadOnly = true;


    } )
    .catch( error => {
        console.error( 'Oops, something went wrong!' );
        console.error( 'Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:' );
        console.warn( 'Build id: efxy8wt6qchd-qhxgzg9ulnyo' );
        console.error( error );
    } );

Upvotes: 1

xmatzx
xmatzx

Reputation: 47

with version 4.5.4 you can do it with:

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

Upvotes: 0

Jeremy Byron
Jeremy Byron

Reputation: 13

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>';
?>

Upvotes: 0

user3020010
user3020010

Reputation: 51

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>

Upvotes: 5

Memonic
Memonic

Reputation: 345

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;

Upvotes: 0

picios
picios

Reputation: 250

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>

Upvotes: 1

epascarello
epascarello

Reputation: 207501

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

Upvotes: 9

Related Questions