Angular中Quill编辑器quill-blot-formatter图片缩放功能失效求助

问题背景 #

在Angular项目中使用Quill编辑器，集成quill-blot-formatter实现图片缩放时，模块已加载完成，图片角落能显示缩放控制点，但拖动控制点无法完成缩放操作。

现象截图 #

用户配置信息 #

组件代码 #

import Quill from 'quill'
import BlotFormatter from 'quill-blot-formatter';
Quill.register('modules/blotFormatter', BlotFormatter);

package.json依赖 #

"@angular/cli": "12.0.2",
"ngx-quill": "^14.3.0",
"quill": "^1.3.7",
"quill-blot-formatter": "^1.0.5"

angular.json脚本配置 #

"scripts": [                        
"./node_modules/quill/dist/quill.min.js",                        
"./node_modules/quill-blot-formatter/dist/quill-blot-formatter.min.js"
]

可行解决方案 #

1. 确保编辑器正确配置blotFormatter模块 #

控制点显示但无法操作，多数情况是未在ngx-quill的初始化配置中启用该模块。添加以下配置：

// 组件内定义编辑器配置
editorConfig = {
  modules: {
    blotFormatter: {}, // 启用blotFormatter模块
    // 其他模块如toolbar等按需配置
  }
};

模板中绑定配置：

<quill-editor [modules]="editorConfig"></quill-editor>

2. 移除重复的模块注册 #

由于angular.json的scripts中已引入quill-blot-formatter.min.js，该脚本会自动完成模块注册，组件内手动注册会导致冲突。移除组件内以下代码：

// import BlotFormatter from 'quill-blot-formatter';
// Quill.register('modules/blotFormatter', BlotFormatter);

3. 排查版本兼容性 #

当前quill-blot-formatter@1.0.5可能与quill@1.3.7存在适配问题，尝试升级到最新版本：

npm install quill-blot-formatter@latest --save

4. 修复DOM事件传递问题 #

Angular的样式或全局事件监听可能阻止鼠标事件传递到缩放控制点，添加CSS确保事件正常接收：

.ql-editor img {
  pointer-events: auto !important;
}
.ql-blot-formatter {
  pointer-events: auto !important;
}

5. 确保模块加载时机正确 #

若编辑器初始化过早，可能导致blot-formatter未完全加载。在ngAfterViewInit中延迟初始化：

ngAfterViewInit() {
  setTimeout(() => {
    // 执行编辑器初始化逻辑
  }, 0);
}

内容的提问来源于stack exchange，提问作者dhaval