奎尔调整模块大小

一个用于Quill丰富文本编辑器的现代,安全的模块,可以使您调整图像,视频,和iframe的大小,并具有全面的安全更新和增强功能.

* 特性

• 🖼️ 图像和 GIF 调整大小 - 修改图像大小和带有拖柄的动画GIF
• 🎥 视频调整大小 - 调整视频(和iframes)的尺寸,保持宽度比
• 📱 响应设计 - 所有设备的工程
• 👆 触摸、指针和指针支持 - 鼠标、触摸和笔的统一指针事件,加上触摸屏幕上的原生两指相接到大小
• ⌨️ 键盘可访问 - 真实 <button> 控制、焦点管理和键盘快捷键
• 💾 持续大小 - 宽度、高度和校正存活 getContents()编号 :setContents() 往返、复制和页面重装
• 🌐 多语种支助 - 自定义本地化选项
• 🔒 警卫第一 - 零脆弱性、现代依赖性,定期审计
• ⚡ 业绩优化 - 轻量级(XQ7 kB brotli)和快活型
• 🎨 自定义工具栏 - 显示/隐藏对齐和大小工具
• 📏 大小显示 - 可选尺寸指标
• 🔔 已打入调用 - 说吧 onSelect, (中文(简体) ), onResizeStart, (中文(简体) ), onResize, (中文(简体) ), onResizeEnd, (中文(简体) ), onAlignChange
• 📐 调整限制大小 - 分/最大宽度/高,宽-角锁定(全球或每个嵌入标记),以及 %编号 :px 可配置预设的大小模式
• 🧩 自定义嵌入 - 配置触发重叠的标记(embedTags)或解决任意包装元素(resolveEmbed没有叉子
• ✏️ 媒体属性 - 编辑 alt 文本和内容 title 从工具栏开始,通过奎尔的三角洲模式持续
• ⬆️ 上传 Hooks 压缩( C) - 截获粘贴/投放的图像 onImageUpload 发送到您自己的上传管道, 并带有可选客户端的缩小范围通过 imageCompression
• 📦 现代包装 真正的无害环境管理(.mjs)和 UMD 建构正确 exports编号 :module 分辨率,加上头等类型脚本
• 🧪 框架就绪 - Vanilla JS、React、Next.js、Vue和Angular的融合指南

V2.1 有什么新鲜事

• 触摸设备上的大小 - 把第二个手指放在任何地方 选中的图像/ 视频, 并抓取或扩展到比例大小 , 不需要瞄准小手柄.
• 更可靠的触摸拖曳 - 调整的手柄现在使用指针 事件(摩擦、触摸和笔接合) 扩大的隐形被击中区域.
• 原生奎尔持久性 - 宽度/高度/调整现在由 已注册的Quill格式,所以它们在 Delta 序列化中幸存下来 仅依赖内含样式.
• 以可选压缩方式上传钩子 - 有线 onImageUpload 改为 在被插入前截取已粘贴/已投放的图像 .
• 自定义嵌入支持 - 调整任意包装元素的大小或额外 通过标签 resolveEmbed编号 :embedTags,没有伪造的图书馆.
• 键盘访问 - 箭键重塑大小、重点管理以及 屏幕阅读器友好控制.
• 依赖性审计 - 脆弱性从23个减少到1个(a) 有记录的、无法固定的上流低热度问题),100%的测试 和lint工具保持时速.
• 真正的无害环境管理建设 - 说吧 dist/quill-resize-module.esm.mjs 修正 a 上一个包装错误 import 解为 UMD 捆绑 真正的无害环境管理.

德莫语

现场德莫: 页:1

针对具体框架的整合实例(Vanilla、React、Next.js、Vue、, 使用寿命周期/清理指导的角) examples/。 。 。 .

* 安装

npm install @botom/quill-resize-module

或与平按:

pnpm add @botom/quill-resize-module

使用 Yarn 时 yarn add @botom/quill-resize-module。 。 。 . quill 是一个对等点 依赖,请在应用程序中安装:

npm install quill
# or: pnpm add quill
# or: yarn add quill

3号货船因此建造了节点/分解和 简单 <script> 正确使用工作 :

包裹 exports 地图解析 import编号 :require 自动 - 通常不需要直接引用这些路径.

使用量

ES6/ 类型脚本

import Quill from "quill";
import ResizeModule from "@botom/quill-resize-module";

Quill.register("modules/resize", ResizeModule);

const quill = new Quill("#editor", {
  modules: {
    resize: {
      showSize: true,
      locale: {
        altTip: "Hold down the alt key to zoom",
        floatLeft: "Left",
        floatRight: "Right", 
        center: "Center",
        restore: "Restore",
      },
    },
  },
});

浏览器( CDN)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Quill Resize Module Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.snow.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@botom/quill-resize-module@latest/dist/quill-resize-module.js"></script>
</head>
<body>
  <div id="editor"></div>
  <script>
    Quill.register("modules/resize", window.QuillResizeModule);
    
    const quill = new Quill("#editor", {
      modules: {
        toolbar: ["bold", "italic", "image", "video"],
        resize: {
          showSize: true,
          locale: {}
        }
      },
      theme: "snow"
    });
  </script>
</body>
</html>

QQ 配置选项

toolbar.alingTools (原名,拼写错误)仍然可以 折旧的别名 toolbar.alignTools,但新代码应当使用 更正名称.

回电

ResizeChangeEvent 实值 { target: HTMLElement; width: number; height: number; align: "left" | "center" | "right" | null }。 。 。 .

import type { QuillResizeModuleOptions, ResizeChangeEvent } from "@botom/quill-resize-module";

const options: QuillResizeModuleOptions = {
  onSelect: (element) => console.log("selected", element),
  onResizeStart: (element) => console.log("resize start", element),
  onResize: (element, event: ResizeChangeEvent) => {
    console.log(`resizing to ${event.width}x${event.height}`, event.align);
  },
  onResizeEnd: (element) => console.log("resize end", element),
  onAlignChange: (element, align) => console.log("align changed", align),
};

区域配置

const quill = new Quill("#editor", {
  modules: {
    resize: {
      locale: {
        altTip: "Hold down the alt key to zoom",
        floatLeft: "Left",
        floatRight: "Right",
        center: "Center",
        restore: "Restore",
      },
    },
  },
});

工具栏自定义

// Hide alignment tools (e.g. for content pipelines that don't need it)
const quill = new Quill("#editor", {
  modules: {
    resize: {
      toolbar: {
        alignTools: false, // Hide alignment
        sizeTools: true,   // Keep size tools
      },
    },
  },
});

QQ 媒体属性( 备选案文和标题)

工具栏中每个可扩展的目标都有一个“编辑属性”按钮 (隐藏它与 toolbar.attributesTool: false打开一个小面板 供编辑 alt 文本和内容 title数字 :

const quill = new Quill("#editor", {
  modules: {
    resize: {
      onAttributesChange: (element, { alt, title }) => {
        console.log("attributes saved", { alt, title });
      },
    },
  },
});

• 这个 替换文本 字段仅显示为 <img> 目标,匹配 本地 HTML 语义学 – 视频和 Iframes 没有 alt 属性.
• 这个 标题 字段可供任何目标使用,并设置一个简单的 HTML title 属性(被浏览器显示为本地工具提示).
• 两个字段被保存到奎尔的Delta模型(alt编号 :title 德尔塔 属性),当存在活的奎尔实例时,它们生存下来 getContents()编号 :setContents() 圆行恰好像宽度,高地, 和对齐.
• 按键 逃脱 在面板内集中时 关闭了 面板,将重排大小打开.

调整限制和模式大小

控制每个调整手势的界限和行为(指针拖动, 键盘箭头步骤,以及 px-单位工具栏动作 :

const quill = new Quill("#editor", {
  modules: {
    resize: {
      constraints: {
        minWidth: 80,
        maxWidth: 800,
        minHeight: 60,
        maxHeight: 600,
        lockAspectRatio: true, // always preserve ratio, without needing Alt
      },
      // Override constraints for specific embed tags — per-tag fields win
      // over the matching field in the global `constraints` above.
      constraintsByTag: {
        video: { lockAspectRatio: true },
        iframe: { lockAspectRatio: true, minWidth: 320 },
      },
    },
  },
});

绝对的30px最小值始终作为安全底值适用,即使 较小 minWidth编号 :minHeight 已配置.

在相对之间切换( T)%)和绝对(px) 为工具栏的大小 预设按钮和宽度输入,并自定义哪些百分比 作为预设提供:

const quill = new Quill("#editor", {
  modules: {
    resize: {
      toolbar: {
        sizePresets: [100, 75, 50, 25], // default is [100, 50]
        sizeUnit: "px", // default is "%"; presets/input become fixed px sizes
      },
    },
  },
});

单位 "%" 模式(默认)预设按钮/输入设置一个相对 width: N%;,所以嵌入床 继续调整大小 与其容器。 单位 "px" 模式从嵌入式原大小计算出绝对宽度 (例如,200px宽图像的50%变成 width: 100px;)和设置 height: auto;,所以嵌入体保持固定大小,无论 容器的宽度. minWidth编号 :maxWidth 执行限制 px- 模式预设/输入更改.

自定义嵌入

默认情况下,单击一个 img 或者说 video 附加重排大小 (框架——例如YouTube嵌入体——通过焦点单独处理) 追踪,因为点击内部 跨源 iframe 内容不会泡沫到 页:1 您可以扩展或完全替换此行为 而不伪造图书馆:

const quill = new Quill("#editor", {
  modules: {
    resize: {
      // Fully replaces the default ["img", "video"] list — include every
      // tag you want to be resizable.
      embedTags: ["img", "video", "canvas", "my-custom-embed"],
    },
  },
});

对于不是单一元素的嵌入物(例如包装) <div> 或者说 <figure> 环绕内元素),使用 resolveEmbed 联合国 单击实际调整大小的元素:

const quill = new Quill("#editor", {
  modules: {
    resize: {
      resolveEmbed(clickedTarget, event) {
        // Clicking anywhere inside a ".chart-embed" wrapper resizes the
        // wrapper itself, not the element that was clicked.
        return clickedTarget.closest(".chart-embed");
      },
    },
  },
});

resolveEmbed 被先检查;如果返回 null编号 :undefined,则 模块返回到 embedTags- 根据被点击元素的匹配 自己的标签名称。 两者 constraintsByTag 和坚持通过奎尔的 Delta 模型( 用于blot- bitched 元素) 完全使用自定义嵌入 就像他们一样 img编号 :video。 。 。 .

QQ 上传钩并压缩

默认情况下,粘贴或向编辑器投放图像由 Quill/浏览器的本地剪贴板行为(通常为内含) data: URL) (中文(简体) ). 设置 onImageUpload 让你拦截流出 将文件发送给您自己的上传管道—— 模块插入 无论您解决的 URL :

const quill = new Quill("#editor", {
  modules: {
    resize: {
      async onImageUpload(file) {
        const formData = new FormData();
        formData.append("file", file);
        const response = await fetch("/api/upload", {
          method: "POST",
          body: formData,
        });
        const { url } = await response.json();
        return url;
      },
    },
  },
});

• onImageUpload 仅用于 图像 文件已粘贴/ 已丢弃 直接输入编辑器; 非图像文件并拖放文本或 其他内容没有受到影响.
• 若为 onImageUpload 实值 没有 配置、 粘贴/ 滴放行为 完全没有改变——这个特性是完全选入和后入的 兼容.
• 返回发酵值( 如. undefined 或空字符串)跳过 插入此文件, 如果上传失败, 您将会使用 想要显示自己的错误 UI .
• 多个被粘贴/被丢弃的文件按顺序上传并插入.

可选的,在图像到达前降低客户端 onImageUpload 与 imageCompression数字 :

const quill = new Quill("#editor", {
  modules: {
    resize: {
      onImageUpload /* ... */,
      imageCompression: {
        maxWidth: 1600,
        maxHeight: 1600,
        mimeType: "image/jpeg",
        quality: 0.8,
      },
    },
  },
});

imageCompression 使用内存 <canvas> 调整大小/重编码 图像并永远不升级已经小于图像 配置界限 。 只有配对时才有效果 onImageUpload (粘贴/滴滴截取器不激活其他方式), 如果画布2D渲染不可用 ,或者压缩步骤为任意 理由,原始文件的传递方式不变,而不是 上传失败 .

高级配置

将工具栏的能见度与活的大小标签合并 :

const quill = new Quill("#editor", {
  modules: {
    resize: {
      toolbar: {
        alignTools: false, // Disable alignment tools
      },
      showSize: true,
    },
  },
});

& 键盘快捷键

调整手柄大小和每个工具栏控制都是真实的 <button> 要素 (不是锚),所以它们可以达到,可以使用键盘一次 覆盖已激活,由屏幕阅读器正确宣布. 当覆盖激活时,焦点会自动移动到调整大小的手柄上:

通过指针事件和调整大小支持触取和笔接输入 手柄具有被放大(隐形)的触摸屏被击中的区域. 触摸时 设备,整个选定的媒体区域也支持 抓到调整大小数字 : 把第二个指头放到任何位置 覆盖,扩散或捏 平面宽度和高度并列,比例与距离 手指会动——不需要精确地降落在小把手上. 锁定 取消正在拖动的单指手柄, 并尊重同样的 constraints (最小/最大宽度/高)与其他每个调整大小的手势一样.

QQ Bug 修正安全性( S)

最近的修补

• ✅ 固定定位 当在相对元素内筑巢时(PR #12)
• ✅ 安全脆弱性 解决(DOM Clobbering XSS、RCE)
• ✅ 更新的依赖关系 至最新安全版本
• ✅ 系统现代化 随卷起 v3

安全状况

• 🔒 0个脆弱性 生产依赖性(npm audit --omit=dev --audit-level=high(中文(简体) )
• 🛡️ 现代依赖关系 - 保守地跟踪和补救长期工具脆弱性(见 MEJORAS_LIBRERIA.md(中文(简体) )
• 一个知道 低强度 问题 quill 本身(HTML导出特性中的 XSS, GHSA-v3m3-f69x-jf25)),影响最近出版的 quill 上行跟踪,本单元未引入
• ✅ CI/CD 安全 带节点.js 20.x

QQ 浏览器支持

* 框架兼容性

模块本身没有框架依赖性,仅需要 Quill 2.x 实例. 像奎尔自己,它读 document编号 :HTMLElement 在构建时, 因此它不能在服务器侧渲染时运行; in 安全部门改革框架(Next.js、Nuxt、Angular Universal等)总是创建 仅在客户端上编辑。 见 examples/ 页:1 从事了香草,React,Next.js,Vue,和Angular集成,包括 安全部门改革指导和清理/destroy() 生命周期接线.

捐款

1. 叉子存储器
2. 创建您的特性分支( E)git checkout -b feature/amazing-feature(中文(简体) )
3. 提交更改( E)git commit -m 'feat: add amazing feature'(中文(简体) )
4. 推向分行(git push origin feature/amazing-feature(中文(简体) )
5. 打开拉请求

提交公约

这个项目紧随其后 常规武器委员会 用于自动版本:

• feat: 新特性
• fix: 对于错误修正
• docs: 文档
• style: 用于格式化
• refactor: 用于代码重构
• test: 测试
• chore: 维修费

发展

# Clone the repository
git clone https://github.com/BOTOOM/quill-resize-module.git
cd quill-resize-module

# Install dependencies (choose one)
npm install
# pnpm install
# yarn install

# Start development
npm run dev

# Run tests
npm test

# Build for production
npm run build

许可证

麻省理工学院 埃德瓦尔·迪亚斯

有关项目

• Quill.js (英语) - 现代丰富的文本编辑器
• Quill 图像大小调整 - 替代图像大小调整模块

数据