javascript - CKeditor 使内联编辑器只读

Question

我正在使用 ckeditor 的内联编辑器来创建 html 内容。我怎样才能让它只读并只显示预览模式的内容。我尝试了以下配置，但它对我不起作用。

this.editorInstance.setReadOnly( true); 

这里 this.editorIntance 是我的编辑器。我只想在预览模式下显示内容，不想显示编辑器的工具栏。

Answer 1

使用以下脚本使 CKeditor 只读。在 toggleReadOnly 函数中传递“true”或“false”参数，以相应地禁用或启用 ckeditor。

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

请引用工作演示:https://jsfiddle.net/rbua57pq/3/