BlockNote Docs特性内置模块行内容

行内容

默认情况下,BlockNote 中的 InlineContent(如段落等文本块的内容)可以是 StyledTextLink 对象。

以下是所有默认行内容及其支持的属性概述:

样式化文本

StyledText 是一种 InlineContent 类型,用于显示带样式的文本片段:

type  = {
  : "text";
  /**
   * 文本内容。
   */
  : string;
  /**
   * 文本的样式。
   */
  : ;
};

链接

Link 对象表示指向 URL 的链接:

type  = {
  : "link";
  /**
   * 链接的内容。
   */
  : [];
  /**
   * 链接的 href。
   */
  : string;
};

自定义链接

你可以使用 links 编辑器选项来自定义链接的渲染方式以及它们对点击的响应方式。

const editor = BlockNoteEditor.create({
  links: {
    HTMLAttributes: {
      class: "my-link-class",
      target: "_blank",
    },
    onClick: (event) => {
      // 自定义点击逻辑,例如不重新加载页面的路由。
    },
  },
});

HTMLAttributes

应添加到已渲染链接元素中的额外 HTML 属性。

const editor = BlockNoteEditor.create({
  links: {
    HTMLAttributes: {
      class: "my-link-class",
      target: "_blank",
    },
  },
});

onClick

点击链接时调用的自定义处理函数。如果保持为 undefined,则链接会在点击时于新窗口中打开(默认行为)。如果提供了该函数,则默认行为会被禁用,并改为调用此函数。

返回 false 会让 BlockNote 在此处理函数之后运行其他点击处理函数。返回 true 或不返回任何值(默认)会将事件标记为已处理。

const editor = BlockNoteEditor.create({
  links: {
    onClick: (event) => {
      // 点击链接时执行某些操作。
    },
  },
});

默认样式

BlockNote 中的默认文本格式设置选项用默认架构中的 Styles 表示:

type  = {
  /**
   * 文本是否加粗。
   * @default false
   */
  : boolean;
  /**
   * 文本是否斜体。
   * @default false
   */
  : boolean;
  /**
   * 文本是否带下划线。
   * @default false
   */
  : boolean;
  /**
   * 文本是否带删除线。
   * @default false
   */
  : boolean;
  /**
   * 文本是否以行内代码形式渲染。
   * @default false
   */
  : boolean;
  /**
   * 文本颜色。
   * @default "default"
   */
  : string;
  /**
   * 文本背景颜色。
   * @default "default"
   */
  : string;
};