Paste an image or add one by URL.
', }); ``` 使用您的应用程序服务的 URL 添加图像 : ```ts editor.chain().focus().setImage({ src: '/uploads/photo.jpg', alt: 'A mountain reflected in a lake', }).run(); ``` 打电话 `editor.destroy()` 当删除编辑器时。 扩展贡献图像 当这些 UI 组件是时, 控制到 Domternal 的工具栏和泡泡菜单 挂载; 赤色 Core 编辑器不会创建这些组件. ## 上传文件到您的应用程序 没有上传处理器, 所接受的文件将作为数据嵌入到文档中 URLs (英语). 要将文件存放到其他地方, 请替换 `Image` 在带 a 的扩展阵列中 已配置实例 。 此示例期望您自己 `/api/upload` 结束点到 返回 JSON 包含 `url` 字符串 : ```ts Image.configure({ allowBase64: false, allowedMimeTypes: ['image/jpeg', 'image/png', 'image/webp'], maxFileSize: 5 * 1024 * 1024, maxFiles: 5, uploadHandler: async (file) => { const form = new FormData(); form.append('file', file); const response = await fetch('/api/upload', { method: 'POST', body: form }); if (!response.ok) throw new Error('Image upload failed'); const result = await response.json() as { url?: unknown }; if (typeof result.url !== 'string' || !result.url) { throw new Error('The upload endpoint did not return an image URL'); } return result.url; }, onUploadError: (error) => { console.error(error.message); }, }); ``` 相同的MIME、大小和计数规则适用于粘贴、投放和取出文件者 图像。 验证服务器上的上传 。 文件保持其插入顺序 同时同步上传完成。 主题使 `.domternal-image-uploading` 占位符作为本地装入状态 轻/暗指标。 它尊重减少运动,在打印时被隐藏. 它只查看,没有键盘站,从未输入已保存的内容或撤消 历史 上传或删除插入点失败将删除 装入指标。 见 [文件插入并撤消](https://domternal.dev/v1/nodes/image/#how-files-are-inserted) 用于选择替换、取消和协作编辑. ## 共同选项 | 选项 | 默认 | 目的 | | --- | --- | --- | | `inline` | `false` | 将图像放入文本而不是块 . | | `enableTransforms` | `false` | 切入图像几何学属性和裁剪,旋转和镜像命令. | | `placement` | `null` | 让预设选择浮动或对齐控件; 设置 `'float'` 或者说 `'align'` 明确取消. | | `allowBase64` | `true` | 在未提供上传处理器时接受图像数据 URL并嵌入文件 . | | `uploadHandler` | `null` | 存储文件并返回其 URL . | | `maxFileSize` | `0` | 每个文件的最大字节; `0` 留下无限的尺寸. | | `maxFiles` | `10` | 每个操作的最大接受文件; `0` 删除计数限制. | | `allowedMimeTypes` | JPEG、PNG、GIF、WebP、SVG、AVIF | 文件被接受的 MIME 类型 . | 与 `allowBase64: false` 没有 `uploadHandler`,无法插入文件. 远程图像 URL 仍然可以使用 。 这个 [完全选项参考](https://domternal.dev/v1/nodes/image/#options) 还覆盖了HTML属性并上传回调. ## 命令和备选案文文本 | 命令 | 目的 | | --- | --- | | `setImage({ src, alt, ... })` | 插入带有其属性的图像. | | `setImageFloat('left')` | 围绕所选图像环绕文字 . | | `setImageAlign('center')` | 对齐选中的图像, 不进行文字包装 . | | `setImageTransform({ crop, rotation, flipX, flipY })` | 与 `enableTransforms: true`,替换选定的图像无损几何; `null` 重装. | | `deleteImage()` | 删除选中的图像 . | 浮动和对齐每个接受 `'none'`, (中文(简体) ), `'left'`, (中文(简体) ), `'center'` 财务报告和审定财务报表 `'right'`; 设置 一者清净. 命令在当前选择上运行. 使用描述 `alt` 为有意义的图像. `alt: ''` 将图像标记为 装饰和制作 `alt=""`· ; `null` 表示未提供说明 并省略属性。 见 [备选文本编辑](https://domternal.dev/v1/nodes/image/#editing-alt-text)。 。 。 . ## 裁剪、旋转和镜像图像 自由 1. 6.0 增加了无损图像几何. 在编辑器中明确启用 扩展数组 : ```ts Image.configure({ enableTransforms: true }); ``` 默认的图像图案和普通图像JSON保持不变. 启用此功能 选项 `imageTransform` 属性,默认为 `null`。更新任意 严格应用方案,允许该字段,并允许在每段 在存储已转换的图像之前合作编辑器 。 没有编辑器 选项无法从启用的编辑器中保存几何. 这个 `imageTransform` 属性保持源字节不变。 裁剪 使用原始图像的分数,然后是水平/垂直镜像 顺时针旋转。 编辑器和保存的 HTML 使用可旋转的视图 边框; 调整该框宽度的修改,同时保留其宽度比 . ```ts editor.commands.setImageTransform({ naturalWidth: 1600, naturalHeight: 900, crop: { left: 0.1, right: 0.1 }, rotation: 90, flipX: true, }); ``` 命令需要图像节点选择 。 奥米 `naturalWidth` 财务报告和审定财务报表 `naturalHeight` 仅在图像被装入时, 或其当前变换时 已经录下来了. `setImage({ src, imageTransform: { ... } })` 总是需要 明确的内在维度。 一个命令取代完整的变换并 可撤销;在文档中装入、渲染和导出绝不是作者几何. 无 `enableTransforms: true`, (中文(简体) ), `setImageTransform` 财务报告和审定财务报表 `setImage` 带有 明确转换或 `null` 返回时 `false` 不更改文档. 默认菜单中不添加作物/旋转控制 . 每个作物边缘必须在0到1之间,图像至少为1/65,536 保持双向。 内在维度必须是有限度的,必须在 1和1,000,000;旋转必须在1 000 000度以内有限度. 整个转弯都正常了 无效的命令返回 `false`错误 存储的几何作为普通图像,无效或身份转换 保持普通图像标记不变。 这个 `ImageTransform` 财务报告和审定财务报表 `SetImageTransformOptions` 类型导出用于应用程序控制. ## 剪贴板和源策略 截图或仅图像剪贴板插入图像文件 。 复制内容时 hTML/文本具有优先级, 所以 Word 的相片被复制 选择不取代实际内容。 办公室 HTML 正常化是一个 单独的选入 [粘贴清除](https://github.com/domternal/domternal/tree/main/packages/extension-paste-cleanup) 特性; 图像本身并不适用其光栅或结构限制. 内建解析,命令和渲染应用 Core 的 URL 策略. 拒绝 存储源仍然保存在JSON中,但没有被节点视图所加载. URL 检查完成 不检查远程响应字节 。 见 [图像安全](https://domternal.dev/v1/guides/security/#image-security) 编辑 [URL 政策参考](https://github.com/domternal/domternal/blob/main/packages/core/docs/url-and-style-policy.md)。 。 。 . ## 更多文档 - [图像指南](https://domternal.dev/v1/nodes/image/): 内置模式, popovers, 调整大小, 文件处理和节点视图 . - [剪贴板目的地](https://domternal.dev/v1/nodes/image/#clipboard-image-destination):与自定义图像节点合作. - [本地化](https://domternal.dev/v1/guides/i18n/)数字 : `imageMessages` 和可选 `@domternal/extension-image/locales/de` 目录. 作者的备选案文从未被翻译 . ## 许可证 [麻省理工学院](https://github.com/domternal/domternal/blob/main/LICENSE)。 。 。 . ## 常见问题 ### @domternal/extension-image 是什么？ Domternal 编辑器的图像节点扩展名 ### 如何安装 @domternal/extension-image？ 在项目目录运行 npm install @domternal/extension-image，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@domternal/pm（\>=1\.8\.0 \<2\.0\.0）、@domternal/core（\>=1\.8\.0 \<2\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @domternal/extension-image 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @domternal/extension-image 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @domternal/extension-image 需要什么版本的 Node\.js？ package\.json 的 engines 字段要求 Node\.js \>=22。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。 ### @domternal/extension-image 可以商用吗？ @domternal/extension-image 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @domternal/extension-image 的下载量有多少？ 根据 npm 官方下载统计，@domternal/extension-image 在 2026/10/13 – 2026/11/11 这 30 天内被下载 2,425 次，日均约 81 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @domternal/extension-image 还在维护吗？ 最新版本 1\.8\.1 发布于 2026/11/08（5 天前）；至今共发布 47 个版本，其中过去 12 个月发布了 47 个；首次发布于 2026/03/28。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。