如何禁用ZK CKEditor组件？该组件无disabled属性可用

最新版本的ZK CKEditor（org.zkoss.zkforge:ckez:4.7.0.0）未提供直接禁用组件的方法，而原生CKEditor可通过JavaScript实现只读模式。普通ZK组件通常会提供disabled属性，用于限制用户通过UI修改输入状态，但ZK CKEditor没有这个属性。

现有代码示例 #

my.zul: #

<ckeditor id="myCKComponentId"/> <!-- disabled 属性不存在 -->

MyComposer.java: #

public class MyComposer extends GenericForwardComposer {
    CKeditor myCKComponentId;

    public void doAfterCompose(Component comp) throws Exception {
        super.doAfterCompose(comp);
        myCKComponentId.setDisabled(true); // <--- 该方法不存在
    }
}

解决方案 #

ZK CKEditor基于原生CKEditor实现，我们可以通过ZK的客户端API获取原生CKEditor实例，调用其setReadOnly()方法实现禁用效果：

方法1：在Java Composer中执行客户端脚本 #

修改Java代码，通过ZK的Clients API执行JavaScript来设置只读：

public class MyComposer extends GenericForwardComposer {
    CKeditor myCKComponentId;

    public void doAfterCompose(Component comp) throws Exception {
        super.doAfterCompose(comp);
        // 获取组件UUID，调用原生CKEditor的只读方法
        Clients.evalJavaScript("CKEDITOR.instances['" + myCKComponentId.getUuid() + "'].setReadOnly(true);");
    }
}

方法2：在zul页面中直接添加客户端脚本 #

如果无需Java逻辑控制，可在页面加载完成后执行脚本：

<ckeditor id="myCKComponentId"/>
<script type="text/javascript">
    zk.afterMount(function() {
        CKEDITOR.instances['myCKComponentId'].setReadOnly(true);
    });
</script>

补充说明 #

• 若要恢复编辑状态，只需将setReadOnly(true)改为setReadOnly(false)。
• 该方式实现的是原生CKEditor的只读模式，用户无法编辑内容，但可选中、复制文本。

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