How to make CKEditor readonly but still formattable?

Question

I plan to create a web application in which users will be able to apply formatting and comments to articles (to make written and visual notes) and save these their account only. My only problem is that the user CANNOT edit the text, only format it. I would like to use CKEditor for it is a powerful rich text editor, but once it goes readonly, it's no longer formattable. Is there a way to bypass it?

Can you explain a little more? What type of formatting you would like to see (bold, alignment, indentation, etc) and what type of content will be used (only text, images, embedded media, etc)? — f1ames

j.swiderski j.swiderski · Accepted Answer · 2017-10-19T12:15:54

The IMHO best solution i could offer here is in fact a hack where you make the body element of the editor document non-editble:

var editor = CKEDITOR.replace( 'editor1', {
    language: 'en'          
});
editor.on( 'contentDom', function() {
    editor.document.getBody().setAttribute( 'contenteditable', false );
});

Please note however that while you will be able to make text bold or change paragraph into e.g. blockquote or even undo certain changes, you won't be able to insert anything (like table or image) with editor plugins and if you use NewPage plugin editor will be empty and there will be no way to write or insert anything in it so the selection of plugins is crucial here.

How to make CKEditor readonly but still formattable?

1 Answers