CKEditor4非空校验控制提交按钮启用的JS实现方法

原有代码失效原因 #

• 事件绑定错误：CKEditor初始化后会替换原生textarea生成独立的编辑iframe，直接给textarea绑定onkeyup/onchange事件无法捕获编辑器内的操作
• 判断逻辑错误：a!==null || a!==""为或逻辑，判断永远成立；且CKEditor空状态下getData()会返回<p></p>这类默认空标签，并非空字符串，直接判断空字符串不准确
• 覆盖场景不全：仅绑定keyup事件无法捕获粘贴、工具栏操作、拖拽插入内容、撤销重做等非键盘输入的内容变更

完整实现代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CKEditor</title>
    <script src="https://cdn.ckeditor.com/4.19.0/standard/ckeditor.js"></script>
</head>
<body>
<textarea cols="10" id="editor1" name="editor1" rows="10"></textarea>
<input type="button" name="next" value="Submit" id="nxtbtnwht1" disabled/>

<script>
// 初始化编辑器
CKEDITOR.replace('editor1');

// 编辑器实例加载完成后绑定事件
CKEDITOR.instances.editor1.on('instanceReady', function() {
    // 绑定原生change事件，覆盖所有内容变更场景
    this.on('change', function() {
        checkEditorEmpty();
    });
    // 初始化时执行一次校验，适配初始带默认内容的场景
    checkEditorEmpty();
});

/**
 * 校验编辑器内容是否为空，切换提交按钮状态
 */
function checkEditorEmpty() {
    const editorContent = CKEDITOR.instances.editor1.getData();
    // 过滤HTML标签、转义空格、首尾空白字符，获取纯文本内容
    const plainText = editorContent
        .replace(/<[^>]+>/g, '')
        .replace(/&nbsp;/g, '')
        .trim();
    // 纯文本长度为0则禁用按钮，否则启用
    document.getElementById("nxtbtnwht1").disabled = plainText.length === 0;
}
</script>
</body>
</html>

实现要点 #

• 必须使用CKEditor实例自带的change事件，才能覆盖所有内容修改场景，不会出现操作后状态不更新的问题
• 空内容判断需要过滤掉编辑器自动生成的HTML标签、空格转义符、首尾空白，避免用户输入全空格、编辑器生成空标签时误判为有有效内容
• 编辑器加载完成后主动执行一次校验，适配初始状态下编辑器自带默认内容的场景，无需用户操作就能自动启用按钮

内容的提问来源于stack exchange，提问作者V.K