CKeditor Make inline editor readonly

Question

I am using inline editor of ckeditor for creating html content. How can i make it readonly and show only content for preview mode. I tried the following configuration but it is not working for me.

this.editorInstance.setReadOnly( true); 

Here this.editorIntance is my editor. I want to show only content on preview mode and dont want to show toolbar of editor.

Answer 1

Use following script to make the CKeditor read only. Pass 'true' or 'false' argument in toggleReadOnly function to make ckeditor disabled or enabled accordingly.

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.ckeditor.com/#!/api/CKEDITOR.editor-method-setReadOnly
    editor.setReadOnly( isReadOnly );
}

Please refer working demo : https://jsfiddle.net/rbua57pq/3/