缩略图
缩略图 被导出为可直接嵌入到应用程序中的反效果组件.
安装
将软件包及其对应端依赖性一起安装 .
npm install react react-dom @excalidraw/excalidraw
# or
yarn add react react-dom @excalidraw/excalidraw
说明: 如果你想尝试未释放的更改,请使用
@excalidraw/excalidraw@next。 。 。 .
快开始
最低工作设置有两个容易出错的要求:
- 导入软件包 CSS :
import "@excalidraw/excalidraw/index.css";
- Render Excalidraw在非零高的容器内.
import { Excalidraw } from "@excalidraw/excalidraw";
import "@excalidraw/excalidraw/index.css";
export default function App() {
return (
<div style={{ height: "100vh" }}>
<Excalidraw />
</div>
);
}
Excalidraw 填充 100% 的宽度和高度。 如果父母没有身高,画布就看不到了.
下一.js/安全部门改革框架
应当对客户端进行Excalidraw. 在SSR框架如Next.js中,使用客户端组件并动态地加载SSR已禁用.
// app/components/ExcalidrawClient.tsx
"use client";
import { Excalidraw } from "@excalidraw/excalidraw";
import "@excalidraw/excalidraw/index.css";
export default function ExcalidrawClient() {
return (
<div style={{ height: "100vh" }}>
<Excalidraw />
</div>
);
}
// app/page.tsx
import dynamic from "next/dynamic";
const ExcalidrawClient = dynamic(
() => import("./components/ExcalidrawClient"),
{ ssr: false },
);
export default function Page() {
return <ExcalidrawClient />;
}
完整的设置请参见本地示例 :
LLM / 代理提示
如果 LLM 或编码代理正在设置 Excalidraw , 这些快捷键通常比重发时节省更多的时间 :
- 从平原开始
<Excalidraw />在一个100vh集装箱。 增加裁判员,initialData, 持久性, 或自定义 UI 仅在基底嵌入工作之后. - 如果画布为空白, 请先检查 CSS 导入和母高 。 这是两个最常见的一体化失败.
- 在 Next.js 或其他SSSR 框架中,先假设只客户渲染. 使用
"use client"财务报告和审定财务报表dynamic(..., { ssr: false })在调试水合物之前或window is not defined错误. - 如果进口或入境点不明确,则检查
node_modules/@excalidraw/excalidraw/package.json。安装的软件包导出是真理的来源. - 未设置
window.EXCALIDRAW_ASSET_PATH除非您是故意自宿字体/资产. - 当文档和生成代码漂移时, 请复制此 repo 中最近的工作示例, 特别是
examples/with-nextjs或者说examples/with-script-in-browser。 。 。 .
移动到 @excalidraw/[email protected]
版本 0.18.x 删除旧的 types/- 前置的深导入路径。 如果您从 @excalidraw/excalidraw/types/...,切换到下面的新类型的子路径.
| 旧路径 | 新路径 |
|---|---|
@excalidraw/excalidraw/types/data/transform.js | @excalidraw/excalidraw/element/transform |
@excalidraw/excalidraw/types/data/types.js | @excalidraw/excalidraw/data/types |
@excalidraw/excalidraw/types/element/types.js | @excalidraw/excalidraw/element/types |
@excalidraw/excalidraw/types/utility-types.js | @excalidraw/excalidraw/common/utility-types |
@excalidraw/excalidraw/types/types.js | @excalidraw/excalidraw/types |
放下枪 .js 扩展名。 新的一揽子计划 exports 地图可以解决这些路径.
这些深潜道是用于 import type 只有这个 运行时导入应来自软件包根,加 @excalidraw/excalidraw/index.css 对于风格.
例如:
import { exportToSvg } from "@excalidraw/excalidraw";
自宿字体
默认情况下, Excalidraw 下载所需的字体 光盘N。 。 。 .
自我接待,复制内容 node_modules/@excalidraw/excalidraw/dist/prod/fonts 进入您的应用程序为静态资产服务的路径, 例如 public/设置 window.EXCALIDRAW_ASSET_PATH 走向同一路径:
<script>
window.EXCALIDRAW_ASSET_PATH = "/";
</script>
演示
试试看 代码框示例。 。 。 .
一体化
读取 综合文件。 。 。 .
API 密码
读取 API 文件。 。 。 .
捐款
读取 提供文件。 。 。 .