使用纯 JavaScript 入门
BlockNote 主要设计为 React 应用中快速且简易的块级编辑器，但也可以在纯 JavaScript 应用中使用。不过，这需要你自己编写 UI 元素。
警告
我们推荐与 React 一起使用 BlockNote，这样你可以使用内置的 UI 组件。 本文档将说明如何在不使用 React 的情况下使用 BlockNote 并编写你自己的组件，但这并不推荐，因为你将失去 BlockNote 提供的极佳开箱即用体验。
使用 NPM 安装
要仅安装 BlockNote 的纯 JS 部分，请使用 NPM 运行：
npm install @blocknote/core创建编辑器
以下是创建一个新的 BlockNote 编辑器的方法：
import { BlockNoteEditor } from "@blocknote/core";
import "@blocknote/core/fonts/inter.css";
import "@blocknote/core/style.css";
const editor = BlockNoteEditor.create();
editor.mount(document.getElementById("root")!); // 要将编辑器附加到的元素请务必同时导入 @blocknote/core/style.css（编辑器的样式）和 @blocknote/core/fonts/inter.css（默认字体）。
现在，你的页面上将拥有一个基础的 BlockNote 实例。不过，它还缺少一些菜单和其他 UI 元素。
创建你自己的 UI 元素
因为你无法使用内置的 React UI 组件，你需要创建并注册你自己的 UI 元素。
每个 UI 元素都由一个扩展支持。你可以通过 editor.getExtension(...) 从编辑器中获取扩展实例，每个实例都会公开一个保存其当前状态的 store（可见性、位置以及任何元素特定的数据）。store 是一个小型的可观察容器，包含以下主要成员：用于读取当前值的 state、用于更新状态的 setState，以及用于接收变更通知的 subscribe。可用的 UI 元素扩展如下：
| UI 元素 | 扩展 |
|---|---|
| 格式化工具栏 | FormattingToolbarExtension |
| 链接工具栏 | LinkToolbarExtension |
| 侧边菜单 | SideMenuExtension |
| 建议菜单 | SuggestionMenu |
| 文件面板 | FilePanelExtension |
| 表格控制柄 | TableHandlesExtension |
UI 元素的具体渲染方式由你决定，而 store 可以让你响应状态变化，从而更新元素的可见性、位置和内容：
import { SideMenuExtension } from "@blocknote/core";
const extension = editor.getExtension(SideMenuExtension)!;
// 随时读取当前状态：
const state = extension.store.state;
// 订阅状态变化，例如重新定位或显示/隐藏元素：
const unsubscribe = extension.store.subscribe(() => {
const state = extension.store.state;
// ...根据 `state` 更新你的 UI 元素
});下面来看看如何将侧边菜单添加到编辑器中。下面的示例会挂载一个普通编辑器，并从头开始构建一个自定义侧边菜单，使用扩展的 store 来定位它，并使用其 blockDragStart/blockDragEnd 方法处理拖拽：
。