如何在Editor.js中编程式选中新插入的块

核心实现逻辑 #

blocks.insert() 方法执行后会直接返回新插入块的实例对象，无需额外通过索引查询块，配合Editor.js内置的光标API即可完成选中操作，自动触发前端的选中标记样式。

首先修正你原有插入代码的语法错误（参数对象多写了一个闭合括号），同时接收插入返回的块实例：

const newParagraphBlock = this.myEditor.blocks.insert(
  'paragraph',
  { text: newBlock.text },
  null,
  this.myEditor.blocks.getBlocksCount()
);

调用内置的caret.setToBlock()方法即可完成块选中，该方法会自动同步编辑器内部选中状态、渲染块的选中高亮样式，同时将光标定位到块内，支持指定光标位置：

• 第一个参数传入目标块的实例对象
• 第二个可选参数支持传'start'（光标定位到块内容开头）、'end'（光标定位到块内容末尾），不传默认定位到开头

完整调用代码：

const newParagraphBlock = this.myEditor.blocks.insert(
  'paragraph',
  { text: newBlock.text },
  null,
  this.myEditor.blocks.getBlocksCount()
);

// 选中新插入的段落块，光标定位到内容末尾
this.myEditor.caret.setToBlock(newParagraphBlock, 'end');

通用任意块选中方法 #

如果需要选中非新插入的已有块，先通过块索引拿到目标块实例，再调用相同的选中API即可：

// 索引从0开始计数，例：拿到第3个块的实例
const targetBlock = this.myEditor.blocks.getBlockByIndex(2);
// 执行选中
this.myEditor.caret.setToBlock(targetBlock, 'end');

注意：不要手动操作DOM给块元素添加ce-block--selected类名模拟选中状态，Editor.js内部维护了独立的选中状态机，手动修改DOM会导致内部状态和视图不一致，触发后续编辑异常。

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