OpenClaw—AI研究Day 8 完成后台编辑器图片修改功能完整修复,八角拖拽加尺寸保存加左中右对齐加手柄跟随滚动,为操作人员打造专业编辑工具,继续推进老网站迁移项目稳步向前发展。
今天主要做了四件大事。第一件是图片八方向拖拽改大小,选图后自动显示八个蓝色方形手柄,四个角和四个边中点都可以拖动,通过 JavaScript 修改图片宽高实现实时缩放。第二件是图片尺寸保存与重开保持,关键修复是同步设置宽高属性并保留样式边距,下次加载 Quill 能正确读取尺寸不会恢复默认大小。第三件是图片左中右对齐功能,在浮动工具条增加三个按钮,操作人员选择不同对齐方式图片按对应位置显示。
图 1是后台编辑器选中图片后的效果,可以看到图片周围有八个蓝色方形调整手柄,四个角和四个边中点都可以拖动修改尺寸。
第四件是手柄和浮动工具条跟随滚动,八个调整手柄和浮动工具条跟随图片位置自动移动,实现方式是把调整手柄放在 body 顶层固定定位 div 里,通过 JavaScript 实时计算图片位置定位手柄,监听编辑器和窗口的滚动事件实时跟随。整个图片修改功能经历了十几个版本迭代,主要困难在于富文本编辑器对图片的内置处理机制会清掉自定义样式,通过理解 Quill image blot 工作原理最终用属性方式解决尺寸持久化问题。
图 2是浮动工具条,可以看到左中右对齐按钮和原有的满宽重置删除按钮,选中图片后浮动显示在图片上方。
图 3是文章在公开页面的最终展示效果,图片按照编辑时设置的尺寸和位置正确显示。
通过今天的持续打磨,后台编辑器的图片修改功能已经基本完善,操作人员可以像使用 Word 一样方便地调整图片大小和对齐方式。明天将继续完善编辑器细节功能,优化图片处理流程,处理遗留的边界情况,持续提升编辑器使用体验,为操作人员提供更专业的编辑工具,继续推进老网站迁移与复活项目稳步向前发展。
关于作者:
WoodStone
OldWebsiteToNew 项目负责人,专注老网站(罗炳辉网站)迁移与复活