CODEWITHSUNDEEP
htmlckeditorreadonly
user906153
user906153

Reputation: 1218

Make ckeditor read only on page load

I want to make ckeditor read-only on a page, and only read-only. How do I do this? I have tried to reform the below code to do this, but I can't seem to figure it out.

I made the editor to have a toggle read-only mode, which loads as not read-only. (It's not but I want, but this is the closest I have gotten) This is the code I have for that:

window.onload = function () {
    CKEDITOR.replace('textBox', );
}

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 the html:

 <p>
    <textarea class="ckeditor" id="editor1" name="editor1" style="height:400px;width:900px">${alert.html}</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>

Upvotes: 1

Views: 6391

Answers (1)

oleq
oleq

Reputation: 15895

Define disabled attribute for <textarea> and the editor will start read-only:

<textarea id="editor" disabled>Cow says moo!</textarea>

See the sample fiddle.

Upvotes: 7

Related Questions