MD Composer 附加内容

[Steven]

此主题组件为编辑器添加了少量格式选项：下划线、居中对齐、右对齐、两端对齐和删除线。您可以在设置中自定义每个按钮的文本，使其兼容各种语言。存在 RTL 版本（将右对齐更改为左对齐）。

兼容性

此主题组件是 Discourse Formatting Toolbar 的替代方案，不建议同时使用两者。

我推荐使用该插件，但如果您不想（或无法）安装插件，此主题组件可能会为编辑器添加足够的选项。

此外，为了适应移动设备，我隐藏了一些按钮：项目符号列表、列表和两端对齐。这些按钮在该设备上似乎帮助最小。

对于 RTL 语言论坛，这是 RTL 版本：GitHub - MonDiscourse/md-composer-extras-rtl: Add some formatting option in your discourse composer (rtl version) · GitHub

如果有任何问题，请告诉我！

	预览	md-composer-extras - 预览
	代码仓库	md-composer-extras
	安装指南	如何安装主题或主题组件
	Discourse 主题新手？	Discourse 主题使用入门指南

[Anatolia]

It becomes like this if I use alignin together with underline.

[Steven]

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

[Steven]

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 (Christoph)]

@Steven

I recommend the plugin

What are the disadvantages of using the theme-component?

[Steven]

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

[jtbayly]

Quite amazing what can be done with theme components! Well done.

[verilog15 (verilog)]

Nicely done
Do you think it’s possible to somehow to convert the HTML tags to some default tag like [Center] and something in the backend will convert it back (for UI reasons)?

[Steven]

At the time, it wasn’t possible to create some bbcodes easily with theme components, I don’t know if it is now.

For now, if you want bbcode center and a button in the composer, the best way is to use the plugin : Formatting toolbar

[Johani (Joe)]

A tag like [center] will still require a plugin but you’re correct @Steven

At the time of this component’s creation you had to use HTML <div> tags. However, you can now use [wrap="foo"][/wrap] in themes / components.

You can read more about that here

Generic bbcode wrapper for theme components

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…

Here’s a simple example

[wrap="center"] 
Some center aligned text 
[/wrap]

would create this markup when the post is cooked

<div class="d-wrap" data-wrap="center">
  <p>Some center aligned text</p>
</div>

which you can then target with a CSS attribute selector like so

[data-wrap="center"] {
  text-align: center;
}

and that would create something like this in both the composer preview and the rendered post

or

[wrap="right"] 
Some right aligned text 
[/wrap]

and that would result in this cooked markup

<div class="d-wrap" data-wrap="right">
  <p>Some center aligned text</p>
</div>

You can then add this CSS

[data-wrap="right"] {
  text-align: right;
}

for this result

Since the component currently uses the HTML align attribute, this change should be 100% backwards compatible.

Give it a go whenever you have the time and feel free to PM me if you have any questions about that.

[thwright]

I just submitted pull requests for the wrap components.

https://github.com/iunctis/md-composer-extras/pull/1
https://github.com/iunctis/md-composer-extras/pull/2
https://github.com/iunctis/md-composer-extras/pull/3

[thwright]

I added further pull requests for float left, with a CSS option for float right, moving the strikethrough button to be with the bold, italics, and underline buttons, and created a basic columns button. The last may be better as its own component or pushed to the pop up menu.

I removed the pull request; it needs further modifications. I am also looking to add superscript and subscript buttons, but once you add in calendar events, slick, and tiles, there are too many buttons on the composer in mobile’s vertical composer. It shouldn’t be a problem in horizontal, but if all buttons should be accessible from either menu, then they should be moved into the pop up.

Any thoughts, @Steven, on how you want to handle this?

I will just split the main js into two files and work on some responsive CSS.

Ideally we should also add settings to disable/hide the buttons as desired.

---

EDIT: I’ve implemented the changes mentioned (but elements do not have an option to be hid outside of CSS) and just need to test the changes before submitting a PR.

[thwright]

That PR should be good now, @Steven.

https://github.com/iunctis/md-composer-extras/pull/8

This PR implements responsiveness, floats, columns, superscript, and subscript. See the README for how columns work.

[ondrej]

Hello,
No idea why I am. Getting this. Just uploaded the other day. I’m on the lastest version of this. At least that’s what it tells me.
Thanks

[Steven]

I pushed an upgrade recently but it should work correctly, I just tested on a website on desktop and mobile

Can you try deleting the component and reinstall it ? It seems broken on your forum

Or do you use also the formatting toolbar plugin ? It might create double icons

[ondrej]

OK thanks I’ll look and do what you say happy birthday too

[zuker (Matías)]

是否可以隐藏某些图标？

[Steven]

你想隐藏哪些？我来帮你搞定。

[zuker (Matías)]

删除线、下标、上标 谢谢！

[Steven]

最简单的方法是在您的主题中添加这些 CSS 行，路径为 通用 > CSS

.d-editor-button-bar .strikethrough_button, .d-editor-button-bar .superscript_button, .d-editor-button-bar .subscript_button {
    display: none;
}