文档
操作行内内容

操作行内内容

BlockNoteEditor 提供了多种函数用于与当前选中的内容交互。

部分行内内容

从编辑器获取行内内容时,您总是会收到完整的 InlineContent 对象。 在更新或创建行内内容时,无需传递所有属性,您可以使用 PartialInlineContent 类型:

type PartialLink = {
  type: "link";
  content: string | StyledText[];
  href: string;
};
 
type PartialInlineContent = string | (string | PartialLink | StyledText)[];

插入行内内容

您可以使用以下函数插入行内内容:

insertInlineContent(content: PartialInlineContent)
 
// 用法
editor.insertInlineContent([
  "Hello ",
  { type: "text", text: "World", styles: { bold: true } }
]);

获取样式

您可以使用以下函数获取当前位置文本光标的样式:

getActiveStyles(): Styles;
 
// 用法
const styles = editor.getActiveStyles();

如果有选区处于激活状态,此函数返回选区末尾处的样式。

添加样式

您可以使用以下函数为当前选中文本添加样式:

addStyles(styles: Styles): void;
 
// 用法
editor.addStyles({ textColor: "red" });

移除样式

您可以使用以下函数移除当前选中文本的样式:

removeStyles(styles: Styles): void;
 
// 用法
editor.removeStyles({ bold: true });

切换样式

您可以使用以下函数切换当前选中文本的样式:

toggleStyles(styles: Styles): void;
 
// 用法
editor.toggleStyles({ bold: true, italic: true });

获取选中文本

您可以使用以下函数获取当前选中的文本:

getSelectedText(): string;
 
// 用法
const text = editor.getSelectedText();

获取选中链接

您可以使用以下函数获取当前选区中链接的 URL:

getSelectedLink(): string | undefined;
 
// 用法
const linkUrl = editor.getSelectedLink();

如果选区中包含多个链接,此函数仅返回最后一个链接的 URL。若无链接,则返回 undefined

创建链接

您可以使用以下函数创建一个新链接:

createLink(url: string, text?: string): void;
 
// 用法
editor.createLink("https://www.blocknotejs.org/", "BlockNote");

如果有选区处于激活状态,新链接将替换当前选中的内容。