lindsey
(Lindsey Fogle)
2025 年7 月 7 日 17:45
1
今年我们的一项主要工作是为编辑器开发一种新的富文本编辑模式,使在 Discourse 上写作变得更加熟悉和直观。新编辑器已在 Meta 上提供,并作为实验性功能开放了一段时间,但现在我们很高兴地移除 experimental(实验性)标签,邀请您的社区尝试使用!
在本主题中,我们将分享更多关于编辑器的信息,它是如何工作的,以及如何通过几次点击就在您的社区中启用它。
Discourse 的全新富文本编辑器
新的富文本编辑器简化了 Discourse 用户的写作体验,特别是对于那些不太懂技术或不熟悉或不习惯使用 Markdown 写作的用户。富文本编辑器支持 Markdown,以及常见的键盘快捷键和工具栏格式调整,但格式会立即渲染,提供类似 Google Docs 和 Notion 等熟悉工具的 WYSIWYG(所见即所得)体验。
Markdown 的未来
我们知道许多 Discourse 用户喜欢当前的 Markdown 编辑器,并享受其可预测、直观的写作体验。新编辑器是一个与现有 Markdown 模式并行的编辑器“模式”,因此您的成员可以选择最适合他们的写作风格。
您在经典 Markdown 编辑器中做的许多事情现在都可以在富文本编辑器中使用,包括:
所有基本格式,支持 Markdown(**粗体**),使用常见的键盘快捷键(Command + B ),以及通过工具栏图标。
支持高级功能,如创建表格、创建投票、插入日期/时间、添加隐藏详情部分、添加模糊剧透部分、上传文件/图片/视频、将链接渲染为 oneboxes、样式化分类/标签/用户提及、引用内容以及插入脚注。
专用的链接 UI,用于访问、编辑、复制、设置标题或移除链接
专用的图片 UI,用于调整大小、添加标题或删除图片
然而,还有一些领域我们仍在努力,例如使编辑表格和投票变得更加容易。我们将继续努力实现编辑器模式之间的功能对等,并鼓励您分享 #contribute:功能请求 ,告诉我们哪些功能和能力对您来说最重要,以帮助我们确定工作优先级。同时,您始终可以切换回 Markdown 模式以满足高级需求。
我们是如何构建它的
我们的实现建立在优秀的 ProseMirror 及其非核心的 Markdown 模块 之上,使用该模块的模式、解析和序列化定义作为进一步 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 Flemming)
2025 年7 月 16 日 20:17
21
alltiagocom:
我不喜欢新的等宽字体
这对您有用吗:
.d-editor-container .d-editor-textarea-wrapper textarea.d-editor-input {
font-family: var(--font-family);
}
3 个赞