操作行内内容
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");
如果有选区处于激活状态,新链接将替换当前选中的内容。