编辑预览位置

[Alteras (Steven Chang)]

	摘要	允许用户在 Discourse 的编辑器中重新定位和调整预览的大小。
	仓库	GitHub - Alteras1/discourse-editor-preview-position: Discourse theme component for users to reposition and resize the preview
	安装指南	如何安装主题或主题组件
	Discourse 主题新手？	Discourse 主题使用入门指南

Install this theme component

允许用户在 Discourse 的编辑器中重新定位和调整预览的大小。双击拖动条可将分割线重新定位到中心。

Fullscreen preview

https://github.com/Alteras1/discourse-editor-preview-position/raw/main/.github/images/editor-preview-position-fullscreen.gif

https://github.com/Alteras1/discourse-editor-preview-position/raw/main/.github/images/editor-preview-position-fullscreen.gif(image larger than 10 MB)

还添加了以与全屏视图相同的样式设置编辑器的选项。

设置

顶部栏预览按钮

将预览按钮移动到顶部栏。默认值：true

Screenshots

非全屏：

全屏：

允许上下预览

允许预览位于编辑器上方/下方。默认值：true

Screenshots

允许可调整大小的水平预览

允许沿水平轴调整预览大小。默认值：true

允许可调整大小的垂直预览

允许沿垂直轴调整预览大小。默认值：true

清洁编辑器样式

将编辑器样式更改为更接近全屏编辑器的样式。默认值：false。

Screenshots

不同方向的样式截图。

此设置更多是个人偏好。在此主题组件的开发过程中，我发现全屏编辑器和非全屏编辑器之间的差异令人分心。因此，我添加了此样式以帮助创建更“统一”的体验。默认情况下它是关闭的。

兼容性与注意事项

由于使用了 api.renderInOutlet() 函数和新的 glimmer 组件，仅在 Discourse v3.2.0 及以上版本中有效。

由于并排预览仅发生在桌面视图中，因此此主题组件仅适用于桌面视图。

同样，由于富文本编辑器没有单独的预览，因此此组件在 RTE 模式下被禁用。

我在截图中使用的主题是 Graceful theme。

[Heliosurge (Dan DeMontmorency)]

很好。相信会员们会喜欢这个！

[Monikas (JustMonika)]

修改垂直方向会导致一个bug

[Alteras (Steven Chang)]

感谢您的报告！已推送修复程序。

Fix vertical preview not capping with new topic composer

嗯……我刚意识到拖动条在工具栏和新主题字段之间……不太确定我的感觉……

[Lilly (Lillian)]

已安装在我的测试论坛上。我很喜欢这个。感谢分享

[jordan.vidrine]

这太棒了，谢谢分享！

[Lilly (Lillian)]

我只是想再次发帖，表达我有多喜欢这个组件。我日常工作的大部分内容都在我自己的实例上完成，它极大地改善了我自己的 Discourse 用户体验。我真的很喜欢更宽的编辑器，以及在我的大屏幕显示器上置顶的预览器。我觉得将这个视图适配到移动设备上可能是可行的（尽管移动键盘可能会对此有所影响），所以一旦我有空闲时间（比如几乎从未有过，哈哈），我可能会分叉并尝试一下。

干得漂亮 再次感谢分享。

[MihirR (Mihir)]

只是快速确认一下，这个主要是为桌面设计的吗？

[Alteras (Steven Chang)]

是的，它是为桌面设计的。

[Alteras (Steven Chang)]

TC 已更新，支持 composer 重新设计！最低 discourse 版本为 v2026.8。

Add composer redesign support (#5)