CKeditor 使内联编辑器只读答案

【问题标题】：CKeditor Make inline editor readonlyCKeditor 使内联编辑器只读
【发布时间】：2016-10-06 08:31:51
【问题描述】：

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

this.editorInstance.setReadOnly( true);

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

【问题讨论】：

标签： javascript ckeditor

【解决方案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/

【讨论】：

我试过了，但它在内联编辑器中不起作用。
是的，它正在工作。但是您使用的是基本编辑器，您可以尝试使用内联编辑器吗？链接
@GiteshPurbia 检查我更新的小提琴。我已经使用了您的
，它在那里工作正常
@GiteshPurbia 有用吗？你检查过新的小提琴吗？
是的，它正在工作。但我想我正在使用 angularjs。所以我用 ng-model 绑定内容。所以我的情况是这不起作用。我正在通过 ng-model 向 ckeditor 提供内容。