如何禁用CKEditor 4的编辑功能？附页面加载代码示例

嘿，要实现把CKEditor 4设为禁用（只读）状态，有两种常用的方式，根据你的场景选就行：

方法一：初始化时直接设置只读 #

在初始化编辑器的配置里添加readOnly: true参数，这样编辑器加载完成后就直接处于禁用状态。修改你的代码如下：

<textarea id="editor1"><?php echo $data['text']; ?></textarea>
<script src="https://cdn.ckeditor.com/4.8.0/full-all/ckeditor.js"></script>
<script>
CKEDITOR.replace( 'editor1', {
    toolbar: [
        { name: 'document', items: [ 'Print' ] },
        { name: 'clipboard', items: [ 'Undo', 'Redo' ] },
        { name: 'styles', items: [ 'Format', 'Font', 'FontSize' ] },
        { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', '...' ] }
    ],
    // 添加这一行，设置编辑器为只读禁用状态
    readOnly: true
});
</script>

方法二：初始化后动态切换禁用状态 #

如果需要在页面运行过程中，根据某些条件动态禁用/启用编辑器，可以调用CKEditor的API方法setReadOnly()：

• 禁用编辑器：

// 获取编辑器实例，调用setReadOnly方法传入true
CKEDITOR.instances.editor1.setReadOnly(true);

• 恢复编辑状态：

// 传入false即可恢复可编辑权限
CKEDITOR.instances.editor1.setReadOnly(false);

不管用哪种方式，设置为只读后，编辑器的内容会完整保留，但用户无法修改，工具栏里的编辑类按钮也会自动变为不可点击状态，完全符合禁用编辑的需求。

内容的提问来源于stack exchange，提问作者sNniffer