lindsey
(Lindsey Fogle)
2025 年7 月 7 日 17:45
1
今年我们的一项主要工作是开发一种新的富文本编辑模式,让 Discourse 的写作体验更加熟悉和直观。新编辑器已在 Meta 上提供一段时间,并作为实验性设置可用,但现在我们已准备好去掉 experimental 标签,邀请您的社区来试用!
在本主题中,我们将详细介绍编辑器、它的工作原理以及如何通过简单的几步操作在您的社区中启用它。
Discourse 的新富文本编辑器
新富文本编辑器简化了 Discourse 用户的写作体验,特别是对于那些不太懂技术或不熟悉 Markdown 写作的用户。富文本编辑器支持 Markdown,以及其他常见的键盘快捷键和工具栏格式调整,但格式会立即渲染,提供所见即所得(WYSIWYG)的体验,类似于 Google Docs 和 Notion 等常用工具。
Markdown 的未来
我们知道许多 Discourse 用户喜欢当前的 Markdown 编辑器,并享受其可预测、直接的写作体验。新编辑器是一种与现有 Markdown 模式并存的编辑器“模式”,因此您和您的成员可以选择最适合您的写作风格。
您在经典 Markdown 编辑器中进行的大多数操作,现在都可以在富文本编辑器中完成,包括:
所有基本格式,支持 Markdown (**粗体**),使用常见的键盘快捷键(Command + B )和工具栏图标。
支持高级功能,如创建表格、创建投票、插入日期/时间、添加隐藏详情部分、添加模糊隐藏部分、上传文件/图片/视频、将链接渲染为 onebox、样式化分类/标签/用户提及、引用内容和插入脚注。
专用的链接 UI,用于访问、编辑、复制、命名或删除链接
专用的图片 UI,用于调整大小、添加标题或删除图片
但是,我们仍在努力改进一些方面,例如使编辑表格和投票更加容易。我们将继续努力实现编辑器模式之间的功能对等,并鼓励您分享 Feature requests,说明哪些功能和能力对您最重要,以帮助我们确定工作的优先级。在此期间,您始终可以切换回 Markdown 模式来处理高级需求。
我们的构建方式
我们的实现基于优秀的 ProseMirror 及其非核心 Markdown 模块 ,并使用该模块的 schema、解析和序列化定义作为进一步 Discourse 特定功能的基石。
启用新编辑器
富文本编辑器 默认对所有社区启用 。当您或您的成员打开编辑器时,您会注意到工具栏中有一个切换按钮。这允许您在经典的纯 Markdown 模式和新的富文本编辑器之间切换。
更新:如果您希望您的成员默认看到 Markdown 编辑器:
45 个赞
volanar
(Volanar)
2025 年7 月 7 日 20:25
2
好消息。路线图上是否有所有富文本编辑器都已具备的功能?彩色文本?由于 markdown 不支持彩色文本,这可以通过 CSS 插件来实现。或者,可能还有我们不知道的其他选项。
3 个赞
在此之后,是否有设置可以决定哪个编辑器是默认的?谢谢。
4 个赞
当你按下“文本大小”按钮时(这个按钮似乎在这个网站上没有,但在我的网站上有),你会看到这个错误
我也没在帖子中看到“图像用户界面”?
Kartoon:
此功能似乎在此网站上不可用,但在我的网站上可用。
这是一个需要更新以兼容新编辑器的自定义功能,您可能正在使用类似 Composer Button Bonanza 的主题组件?(可能还有其他类似的组件)
Kartoon:
我也没在帖子中看到“图片用户界面”?
您最近更新过 Discourse 吗?如果是,您需要点击编辑器中的图片才能看到它。
3 个赞
sam
(Sam Saffron)
2025 年7 月 9 日 03:19
8
我觉得这可能是官方的 bbcode 插件,我记得它有各种功能,比如颜色支持和大小。
4 个赞
我的建议:
我喜欢用 markdown 写作(也许是我习惯了?),但当我使用 markdown 版本时,我不喜欢新的等宽字体,所以对我来说,在我的社区中包含富文本编辑器没有意义(因为我可能是写得最多的人)。话虽如此,这可以是一个用户可以启用/禁用的设置。例如,如果我禁用它,我总是只得到 markdown 版本,所以我保留“正常”字体(不是等宽字体)。如果我启用它,那么我将获得已实现的功能。作为管理员,我可以为社区启用它,但每个用户都可以启用/禁用。或者,每个用户都可以决定在 markdown 版本中使用哪种字体。
我觉得当启用富文本编辑器时,整个编辑器都会调整大小和移动,这有点分散注意力。特别是如果我将同时使用这两个版本(我知道我会的),每当我点击切换按钮时,窗口都会调整大小,这让我觉得很分散注意力。我明白有了富文本编辑器,我们就不需要额外的右侧预览窗格,但仍然……也许那个空间可以用于其他用途?
这只是一个小细节,但如果调整大小会保留,那么编辑器居中对齐页面,但与主题区域相比,它没有对齐,所以在我看来感觉不对劲,这感觉很奇怪:
说实话,我仍然不确定我是否会使用这个功能。我可以看到它最终可能有用,但目前我一想到使用它就有一种“不舒服”的感觉。
4 个赞
一位用户尝试了一些 HTML 代码,但在所见即所得模式下未被渲染——发生的一切就是 HTML 文本被放入了一个框中。当您切换回 Markdown 时,您会在预览面板中看到正确的结果。它应该显示 HTML 的结果,还是您需要切换回 Markdown 才能进行预览?
Wiki 文章正在建设中
请允许创建者在有能力的情况下继续进行。您可以回复提供帮助或建议,但未经许可请勿编辑。
`
2 个赞
renato
(Renato Atilio)
2025 年7 月 10 日 13:21
11
这是故意的,复杂的 HTML 支持仅通过“passthrough” HTML 块完成,正如您所见。
Wiki article under construction
Please allow the creator to work on this as they are able. You are free to offer help or advice by replying, but please do not edit it without permission.
考虑到 style 被清理程序剥离了,为什么不直接写这个?
---
## Wiki article under construction
Please allow the creator to work on this as they are able. You are free to offer help or advice by replying, but please do not edit it without permission.
---
2 个赞
在我们的论坛上测试了新的编辑器,非常喜欢,但在测试过程中遇到一个奇怪的行为,不知道是否是故意的。
使用旧编辑器引用某人时,布局正常,光标出现在引文下方:
但是,使用新编辑器(默认或在撰写回复时更改)时,光标会自动跳到引文文本的末尾:
如果输入任何内容,它都会被计入引文,并且尝试回复时会出现帖子错误:
如果这是默认行为,我们可以告知用户,只是想确认一下,这是使用新编辑器引用用户时的新行为吗?
谢谢。
1 个赞
renato
(Renato Atilio)
2025 年7 月 16 日 11:07
13
这不是故意的,我们有一个内部任务来特别改进这种行为。
3 个赞
Don
2025 年7 月 16 日 11:20
14
你好 谢谢,这很酷
我注意到它还不支持 [wrap]Hello[/wrap] 包装,并且在我尝试使用它时收到了此消息。
Markdown 解析器不支持令牌类型 wrap_open
2 个赞
renato
(Renato Atilio)
2025 年7 月 16 日 11:33
15
我不认为有支持通用“包装”节点的计划,它看起来会是什么样子?只是一个 div?
或者你期望在新组合器中使用 [wrap=something] 吗?
2 个赞
Ethsim2
(Ethan )
2025 年7 月 16 日 11:36
16
您在哪里看到此错误消息?我的实例只是丢弃了 BBcode
Don:
[wrap]Hello[/wrap]
变成
你好
Don
2025 年7 月 16 日 11:48
17
我们使用了一些主题组件,例如 Discourse Icon 和 Discourse Stickers 。
我认为,我可以制作一个无需包装的贴纸组件,因为它只是针对目标,并为贴纸添加一些样式。
将其粘贴到富文本编辑器侧,或者如果您已粘贴到 Markdown 侧,请切换到富文本编辑器侧。
2 个赞
Ethsim2
(Ethan )
2025 年7 月 16 日 15:05
18
我没有收到错误消息,但 BBcode 仍然存在。当选择了富文本编辑器时,桌面上没有预览。
那是在 Discourse commit hash latest-release +269
和
BBcode commit hash 1fbff6b1
renato
(Renato Atilio)
2025 年7 月 16 日 15:13
19
此功能按预期工作,未识别/未实现的 BBCode 会被故意转义(即显示为文本),目前就是这种情况。
Jagster
(Jakke Lehtonen)
2025 年7 月 16 日 20:17
21
alltiagocom:
我不喜欢新的等宽字体
这对您有用吗:
.d-editor-container .d-editor-textarea-wrapper textarea.d-editor-input {
font-family: var(--font-family);
}
3 个赞