图片填充不一致

这里有个小麻烦,帖子预览显示的内容和最终发布的帖子显示的内容之间存在细微差别,而且这种差别取决于使用的是上传的图片还是外部链接的图片。


外部链接图片,此文本后无空行:


此后的文本,前无空行。

现在是上传的图片,此文本后无空行:


此后的文本,前无空行。

1 个赞

热链接图片前的文本,文本后无空行:


之后的文本,之前无空行。

上传图片前的文本,文本后无空行:


之后的文本,之前无空行。

热链接图片的 CSS 如下:

.d-editor-preview img {
    padding-bottom: 1.4em;
}

而上传图片的 CSS 如下:

.d-editor-preview .image-wrapper img {
    padding-bottom: 0;
}

当远程图片被下载到 Discourse 时也会发生这种情况,因为在这种情况下没有设置尺寸,这意味着预览中没有创建 image-wrapper:

远程图片已下载:
![](upload://8af8gZpoBRQh1Lf7j8YsQHFWnFw.jpeg)

已上传图片:
![563687|690x388](upload://oOqqJbiN2BL6Ju752OD87dlJqbI.jpeg)

2 个赞

有意思,谢谢。

我还注意到,在被下载的热链接图片的情况下,初始发布的帖子在图片和其上方的文本之间没有填充,但在几分钟后,当队列中的进程触发下载远程图片时,填充会增加。这可以在帖子的历史记录中看到,填充间隙有视觉变化。

2 个赞

我认为这是因为它会重建帖子并添加所有带有图像查看器的 HTML,这会产生不同的边距或填充。

1 个赞

明白了,谢谢。所以如果能清理掉一些不一致的地方就太好了,令人惊讶的是,用户确实会注意到并因此感到恼火,尤其是当他们习惯了其他论坛引擎中的所见即所得编辑器时。远程图像下载后帖子渲染的自我更改更是奇怪,尽管我完全理解其中有技术原因。

1 个赞

是的,有几处不一致。\n\n例如,有一个类似的:\nWeird vertical space behavior on the message editor / preview

1 个赞

我相信其中一些怪癖将在我们合并 @Johani更改 时得到解决。

2 个赞