MD Composer extras

[Steven]

This theme component adds few formatting options in the composer : underline, align center, align right, justify and strikethrough. You can customize the text of each button in the settings, making it compatible with every languages. Exist in rtl version (change align right to align left).

Compatibility

This theme component is an alternative of the Discourse Formatting Toolbar, I don’t recommend using both.

I recommend the plugin, but if you don’t want to (or can’t) install a plugin, this theme component might add enough options in the composer for you.

Also, to adapt the the component in mobile devices, I hid some buttons : bullet list, list and justify. They seemed the less helpful in this device.

For RTL languages forums, here is the rtl version : GitHub - MonDiscourse/md-composer-extras-rtl: Add some formatting option in your discourse composer (rtl version)

Let me know if there is some issue !

	Preview	md-composer-extras - Preview
	Repository	md-composer-extras
	Install Guide	How to install a theme or theme component
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

[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]

Удивительно, чего можно добиться с помощью компонентов темы! Отличная работа.

[verilog15 (verilog)]

Отлично сделано
Как вы думаете, возможно ли как-то конвертировать HTML-теги в какой-то стандартный тег, например [Center], а на бэкенде (по соображениям UI) они будут конвертироваться обратно?

[Steven]

На тот момент не было возможности легко создавать некоторые BB-коды с помощью компонентов темы; не знаю, так ли это сейчас.

На данный момент, если вы хотите добавить в редактор BB-код для центрирования и кнопку, лучший способ — использовать плагин: Formatting toolbar

[Johani (Joe)]

Тег вроде [center] всё ещё потребует плагина, но вы правы, @Steven

На момент создания этого компонента приходилось использовать HTML-теги <div>. Однако теперь в темах и компонентах можно использовать конструкцию [wrap="foo"][/wrap].

Подробнее об этом можно прочитать здесь:

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…

Вот простой пример:

[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, это изменение должно быть на 100% обратно совместимым.

Попробуйте, когда у вас будет время, и не стесняйтесь написать мне в личные сообщения, если у вас возникнут вопросы.

[thwright]

Я только что отправил pull-запросы для компонентов wrap.

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]

Я добавил дополнительные pull-запросы для float left, с опцией CSS для float right, переместил кнопку зачеркивания вместе с кнопками жирного, курсива и подчеркивания, а также создал базовую кнопку колонок. Последнее, возможно, лучше реализовать как отдельный компонент или перенести в всплывающее меню.

Я отозвал pull-запрос; он требует дальнейших доработок. Я также планирую добавить кнопки верхнего и нижнего индекса, но после добавления событий календаря, slick и плиток на мобильном устройстве в вертикальном редакторе становится слишком много кнопок. В горизонтальном режиме это не должно быть проблемой, но если все кнопки должны быть доступны из любого меню, то их следует перенести во всплывающее окно.

Есть ли у вас какие-либо идеи, @Steven, как вы хотите это решить?

Я просто разделю основной JS-файл на два файла и займусь адаптивными стилями CSS.

В идеале также следует добавить настройки для отключения/скрытия кнопок по желанию.

---

РЕДАКТИРОВАНИЕ: Я реализовал упомянутые изменения (но элементы не имеют опции скрытия, кроме как через CSS) и теперь мне нужно только протестировать изменения перед отправкой PR.

[thwright]

Теперь этот PR должен быть готов, @Steven.

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

В этом PR реализована адаптивность, обтекание, колонки, надстрочный и подстрочный текст. См. README, чтобы узнать, как работают колонки.

[ondrej]

Привет,
Не понимаю, почему это происходит. Загрузил файл на днях. У меня последняя версия программы, по крайней мере, так она мне сообщает.
Спасибо.

[Steven]

Недавно я обновил версию, но она должна работать корректно. Я только что протестировал её на сайте с десктопной и мобильной версий.

Можете попробовать удалить компонент и установить его заново? На вашем форуме, похоже, возникли проблемы.

Или вы также используете плагин панели форматирования? Он может создавать двойные иконки.

[ondrej]

Окей, спасибо. Я посмотрю и сделаю, как вы сказали. С днём рождения тоже

[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;
}