title: Make ckeditor read only on page load
body: <p>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.</p>
  
  <p>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:</p>
  
  <pre><code>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);
  }
  </code></pre>
  
  <p>And the <em>html</em>:</p>
  
  <pre><code> &lt;p&gt;
      &lt;textarea class="ckeditor" id="editor1" name="editor1" style="height:400px;width:900px"&gt;${alert.html}&lt;/textarea&gt;
  &lt;/p&gt;
  &lt;p&gt;
      &lt;input id="readOnlyOn" onclick="toggleReadOnly();" type="button" value="Make it read-only"
      style="display:none" /&gt;
      &lt;input id="readOnlyOff" onclick="toggleReadOnly( false );" type="button"
      value="Make it editable again" style="display:none" /&gt;
  &lt;/p&gt;
  </code></pre>