如何通过代码选中CKEditor 5全部内容并执行命令？

数据老陈

2026-5-20

关于CKEditor 5 全选内容及执行命令的实现方案

没问题！这两个需求在CKEditor 5里都能通过官方API轻松实现，我给你详细说下具体怎么弄：

1. 代码实现全选CKEditor 5内容

CKEditor 5提供了两种可靠的方式来全选编辑器内容，其中内置命令的方式最简洁：

方案一：使用内置`selectAll`命令（推荐）

直接调用编辑器的内置selectAll命令，就能一键选中所有内容，代码非常直观：

// 获取编辑器实例（替换成你的编辑器ID）
const editor = CKEditor.instances.yourEditorId;

// 执行全选命令
editor.execute('selectAll');

方案二：通过模型选区手动控制

如果需要更灵活的选区操作，也可以直接操作编辑器的数据模型来设置全选：

editor.model.change(writer => {
  // 获取编辑器内容的根节点
  const contentRoot = editor.model.document.getRoot();
  // 设置选区覆盖根节点的全部内容
  writer.setSelection(contentRoot, 'in');
});

2. 全选后执行其他命令

当然可行！只要完成全选操作，后续执行的任何CKEditor支持的命令都会自动作用于当前选中的内容。这里给几个实用的例子：

示例1：全选后给文本加粗

// 先全选内容
editor.execute('selectAll');
// 对选中内容执行加粗命令
editor.execute('bold');

示例2：全选后清除所有格式

editor.execute('selectAll');
// 清除选中内容的所有自定义格式
editor.execute('removeFormat');

示例3：全选后复制内容到剪贴板

editor.execute('selectAll');
// 复制选中内容
editor.execute('copy');

重要注意事项

一定要确保操作在编辑器完全初始化后执行，比如在创建编辑器的回调里，或者监听ready事件：

ClassicEditor
  .create(document.querySelector('#editor'))
  .then(editor => {
    // 编辑器就绪后再执行全选和命令操作
    editor.execute('selectAll');
    editor.execute('fontColor', { value: '#e74c3c' });
  })
  .catch(error => {
    console.error('编辑器初始化失败:', error);
  });