图片比较滑块

有没有办法让它处理未上传的照片?通过链接插入的照片?

您好,我想报告此主题组件最近出现的错误。

在此处可见:

最新版本的图像比较滑块

Discourse 版本:3.5.0.beta1-dev

(402ec6bf5c)

感谢您的辛勤工作
Stéphane。

2 个赞

我已经更新了此组件以符合新的 API 标准:

2 个赞

干得漂亮!

不是想给你增加负担……但是……你用新的富文本编辑器看过这个吗?

1 个赞

我没有,它有什么问题吗?

2 个赞

是的,不幸的是它不起作用。当启用富文本编辑器时,点击比较图像按钮后,我看到这个:

1 个赞

我不确定如何让它正常工作,看起来富文本编辑器无法正确处理 HTML。我想在任何类似的组件(如图片库)上也会出现同样的问题。

2 个赞

约瑟夫,你介意我试试修复这个组件吗?

2 个赞

你有没有时间看一下这个,或者接受 @Arkshine 的提议?:smiley:

1 个赞

抱歉,我忘记回复了。我希望有更多知识的人能尝试解决这个问题,我能访问的Discourse实例没有启用富文本,而且我没有启用它的权限,所以我没法真正测试 :thinking: 感谢您的提议!

3 个赞

好的,谢谢告知,我会试试看。:+1:

3 个赞

各位好,我终于有时间来处理这个了。
希望大家对这个 TC 仍感兴趣!

该 PR 对 TC 进行了全面更新,新增以下功能:

  • 缩放和平移(支持鼠标滚轮、捏合手势以及图片上的控件)
  • 全屏视图
  • 在灯箱中打开原始全尺寸图片
  • 可选的“前/后”标签,位置可配置
  • 可选的说明文字
  • 多种滑块样式(线条、细线、圆形、拖拽手柄)及自定义手柄颜色
  • 可在富文本编辑器中直接编辑滑块,或使用 Markdown 编辑
  • 支持键盘操作(方向键移动分隔线,+/-/0 键控制缩放)
  • 可按群组限制谁可以插入滑块

Markdown 格式已更新,使用了 [wrap] 标签,同时确保向后兼容。
需要 2026.6.0-latest 版本。

该功能支持移动端和从右到左(RTL)布局。不过,我并非 UX 专家,也未能在移动端或 iOS 上进行大量测试。

如果您想单独测试,可使用以下信息:

  • URL:https://github.com/arkshine/discourse-image-comparison-slider
  • 分支:modernize-with-rte
    建议不要编辑旧版本中的滑块,以免改变 Markdown 格式
5 个赞