此主题组件为编辑器添加了少量格式选项：下划线、居中对齐、右对齐、两端对齐和删除线。您可以在设置中自定义每个按钮的文本，使其兼容各种语言。存在 RTL 版本（将右对齐更改为左对齐）。
兼容性
此主题组件是 Discourse Formatting Toolbar 的替代方案，不建议同时使用两者 。
我推荐使用该插件，但如果您不想（或无法）安装插件，此主题组件可能会为编辑器添加足够的选项。
此外，为了适应移动设备，我隐藏了一些按钮：项目符号列表、列表和两端对齐。这些按钮在该设备上似乎帮助最小。
对于 RTL 语言论坛，这是 RTL 版本：GitHub - MonDiscourse/md-composer-extras-rtl: Add some formatting option in your discourse composer (rtl version) · GitHub
如果有任何问题，请告诉我！
42 个赞
It becomes like this if I use alignin together with underline.
That’s a limitation of the div align code, you need to add a line between the div align and your text
<div align="center">
[u]underline[/u]
</div>
That’s why I used a bbcode in my formatting toolbar, but I could only use the div in this theme component.
I’ll probably add an extra line by default and a little explanation
3 个赞
I upgraded the component to add those extra lines by default, now, when you use a align button and the underline button, you’ll have something like this
tophee
2019 年6 月 8 日 15:47
5
Steven:
I recommend the plugin
What are the disadvantages of using the theme-component?
The plugin is easier to customize, we can choose which buttons will appear or not, and there are some additional options like color or a float button that can do something like this with the image
3 个赞
做得很好 [Center]，然后由后端根据 UI 需求再转换回来呢？
当时，使用主题组件无法轻松创建某些 bbcode，现在是否可行我就不清楚了。
目前，如果您希望在编辑器中实现 bbcode 居中和按钮功能，最佳方式是使用此插件：Formatting toolbar
1 个赞
Johani
2019 年9 月 2 日 20:28
10
像 [center] 这样的标签仍然需要插件，但你说得对 @Steven
在该组件创建时，你必须使用 HTML <div> 标签。不过，现在你可以在主题/组件中使用 [wrap="foo"][/wrap]。
你可以在这里了解更多相关信息：
I added this feature a while back and realised I didn’t post about it. You can now use a special syntax in markdown to have it cooked and usable in theme components without having to write a plugin.
// wrapped in div.d-wrap
[wrap=baz foo=bar]Content[/wrap]
// wrapped in div.d-wrap
[wrap=baz foo=bar]
Content
[/wrap]
// wrapped in div.d-wrap
[wrap=baz foo=bar]
[/wrap]
// this one will be rendered as a span.d-wrap instead of a div.d-wrap
a [wrap=baz]Content[/wrap] b
The name of the component w…
下面是一个简单的示例：
[wrap="center"]
一些居中对齐的文本
[/wrap]
帖子经过处理后，会生成如下标记：
<div class="d-wrap" data-wrap="center">
<p>一些居中对齐的文本</p>
</div>
然后你可以使用 CSS 属性选择器 来定位它，如下所示：
[data-wrap="center"] {
text-align: center;
}
这样在作曲器预览和渲染后的帖子中都会呈现如下效果：
或者：
[wrap="right"]
一些右对齐的文本
[/wrap]
处理后生成的标记如下：
<div class="d-wrap" data-wrap="right">
<p>一些居中对齐的文本</p>
</div>
然后你可以添加以下 CSS：
[data-wrap="right"] {
text-align: right;
}
最终效果如下：
由于该组件目前使用的是 HTML 的 align 属性，因此这一更改将完全向后兼容。
有空时不妨试试看，如果有任何问题，欢迎随时私信我。
12 个赞
thwright
2019 年11 月 6 日 14:07
11
5 个赞
thwright
2019 年11 月 13 日 14:53
12
我新增了关于左浮动的拉取请求，并添加了右浮动的 CSS 选项，将删除线按钮移至加粗、斜体和下划线按钮附近，还创建了一个基础的分栏按钮。最后这个功能或许最好作为独立组件，或者放入弹出菜单中。
我已撤回该拉取请求，因为它还需要进一步修改。我还计划添加上标和下标按钮，但一旦加入日历事件、Slick 和 Tile 等功能，移动端的垂直编辑器中按钮就会过多。在水平布局中这应该不是问题，但如果所有按钮都需要从任一菜单中访问，那么它们应该移入弹出菜单中。
Steven，关于如何处理这个问题，你有什么想法吗？
我将把主 JS 拆分为两个文件，并着手处理一些响应式 CSS。
理想情况下，我们还应添加设置选项，以便根据需要禁用或隐藏按钮。
编辑：我已实现了上述更改（但元素本身没有隐藏选项，除非通过 CSS），现在只需在提交拉取请求前测试这些更改即可。
3 个赞
thwright
2019 年11 月 16 日 06:44
13
那个拉取请求现在应该没问题了，@Steven 。
https://github.com/iunctis/md-composer-extras/pull/8
该 PR 实现了响应式布局、浮动、列、上标和下标。有关列的用法，请查看 README。
2 个赞
ondrej
2019 年12 月 7 日 09:25
14
你好，
1 个赞
Steven
2019 年12 月 7 日 17:15
15
我最近推送了一个升级，但应该能正常运行，我刚刚在桌面端和移动端的网站上测试过。
你能尝试删除该组件并重新安装吗？看起来它在你的论坛上出现了问题。
或者，你是否也使用了格式工具栏插件？这可能会导致出现重复的图标。
3 个赞
Steven
2020 年1 月 20 日 17:08
20
最简单的方法是在您的主题中添加这些 CSS 行，路径为 通用 > CSS
.d-editor-button-bar .strikethrough_button, .d-editor-button-bar .superscript_button, .d-editor-button-bar .subscript_button {
display: none;
}
6 个赞
