CKEditor 4如何限制用户仅在插入的区块内输入内容？

核心实现思路 #

要让用户只能在插入的区块内输入，需先将编辑器全局设为只读锁定，再单独开放指定可编辑区块的权限，同时通过事件监听强制光标始终落在可编辑区块范围内。

步骤1：全局锁定编辑器 #

初始化编辑器时开启只读模式，先把整个内容区域锁死：

CKEDITOR.replace('editor', {
    readOnly: true,
    // 其他配置（比如自定义工具栏按钮）
});

步骤2：标记并保留可编辑区块 #

插入可编辑区块时，给目标元素添加contenteditable="true"属性，同时配置编辑器允许保留该属性：

// 示例：插入可编辑区块的按钮逻辑
function insertEditableBlock() {
    var editor = CKEDITOR.instances.editor;
    var editableBlock = editor.document.createElement('div');
    editableBlock.setAttribute('contenteditable', 'true');
    editableBlock.setHtml('<p>可编辑内容区域</p>');
    editor.insertElement(editableBlock);
}

在编辑器配置中添加allowedContent，防止属性被过滤：

allowedContent: {
    div: {
        attributes: ['contenteditable']
    },
    // 允许区块内的常规标签
    p: true,
    span: true
}

步骤3：强制光标留在可编辑区块内 #

监听选区变化事件，一旦发现光标落在所有可编辑区块外，自动将其移至第一个可编辑区块：

CKEDITOR.instances.editor.on('selectionChange', function(evt) {
    var editor = evt.editor;
    var selection = editor.getSelection();
    var selectedElement = selection.getStartElement();
    
    // 检查当前选中元素是否在可编辑区块内
    var isInEditableBlock = selectedElement.getAscendant(function(el) {
        return el.getAttribute('contenteditable') === 'true';
    }, true);
    
    if (!isInEditableBlock) {
        // 定位到第一个可编辑区块
        var firstEditable = editor.document.find('div[contenteditable=true]').getItem(0);
        if (firstEditable) {
            var range = editor.createRange();
            range.moveToElementEditablePosition(firstEditable, true);
            selection.selectRanges([range]);
        }
    }
});

步骤4：插入不可编辑区块 #

无需额外设置属性，编辑器全局只读状态下，插入的普通区块默认不可编辑：

function insertNonEditableBlock() {
    var editor = CKEDITOR.instances.editor;
    var nonEditableBlock = editor.document.createElement('div');
    nonEditableBlock.setHtml('<p>不可编辑内容区域</p>');
    editor.insertElement(nonEditableBlock);
}

关键说明 #

之前设置readOnly: false无效，是因为全局可编辑状态下无法限制用户在区块外输入，必须采用「全局锁定+局部开放」的逻辑。同时要确保allowedContent配置正确，避免contenteditable属性被CKEditor过滤导致可编辑区块失效。

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