Бонанза кнопок композитора

[mdoggydog]

Редактор richtext (однопанельный, WYSIWYG) ещё не завершён и пока не поддерживает этот компонент темы должным образом.

	Краткое описание	Composer Button Bonanza позволяет администратору сайта определять и добавлять новые кнопки разметки на панель инструментов Composer, а в конфигурации по умолчанию предоставляет целый набор новых кнопок.
	Репозиторий	centertap/DiscourseComposerButtonBonanza - Codeberg.org
	Readme	README.md
	Примечания к выпуску	RELEASE-NOTES.md
	Руководство по установке	Как установить тему или компонент темы
	Спонсорство	Представлено… Этот компонент темы разработан Центром прозрачного анализа и политики — некоммерческой организацией 501(c)(3). Если этот компонент оказался полезен для вашего сайта, рассмотрите возможность пожертвования в поддержку CTAP.

Установить Composer Button Bonanza

«Возможности Composer, которые вы можете себе позволить!»

Composer Button Bonanza — это компонент темы, который добавляет дополнительные кнопки разметки на панель инструментов Composer.

Из коробки он предоставляет множество новых кнопок — настоящий бонанза кнопок. В конфигурации по умолчанию на панель инструментов добавляются три новые кнопки (Сможете ли вы их заметить? ), а остальные скрываются за кнопкой переключения в выпадающем меню :

После нажатия на кнопку переключения становятся видимыми остальные кнопки:

С помощью настроек конфигурации компонента темы вы можете:

• добавлять новые определения кнопок (и/или удалять предоставленные);
• выбирать, какие кнопки отображать и когда их показывать;
• изменять порядок кнопок, размещая их на панели инструментов или в выпадающем меню с шестерёнкой ;
• предоставлять переводы/локализацию для кнопок.

Этот компонент не определяет никакой разметки или стилей — он лишь добавляет удобные кнопки (возможности!) для ввода существующей разметки, которая активирует уже существующие стили. Его основная цель — помочь пользователям открывать и использовать функциональность Composer. Например, пользователи, которые часто используют сноски, скорее всего, просто будут вводить ^[ и ] напрямую с клавиатуры; но остальные из нас будут рады иметь кнопку , которая напомнит, что нужно сделать.

Преимущество такого подхода заключается в том, что если вы решите удалить этот компонент темы, это не нарушит стилизацию уже существующих постов. Этот компонент не отвечает за стилизацию; он лишь предоставляет ярлыки к функциональности, уже встроенной в Composer, и/или предоставляемой другими плагинами или компонентами темы.

Конфигурация по умолчанию

Конфигурация по умолчанию предоставляет определения для большинства (если не всех) дополнительных элементов разметки, доступных в стандартной установке Discourse (со всеми встроенными плагинами включёнными и без дополнительных плагинов):

• Стили текста:
  • подчёркивание, зачёркивание
  • ^{верхний индекс} и _{нижний индекс}
  • большой текст, маленький текст
  • стиль клавиатуры
• Форматирование
  • Заголовок 1, Заголовок 2, Заголовок 3
  • Сноска^[1]
  • Текст руби( ルビー テキスト)
  • Изображение по внешней ссылке (<img>)
  • Чек-лист
  • Выделенный, Вставленный, Удалённый текст
• Символы
  • Авторское право ©, Зарегистрировано ®, Торговая марка ™
  • Евро €, Иена ¥
  • Каомодзи «пожатие плечами» (потому что, почему бы и нет? ¯\_(ツ)_/¯ )
• и кнопка переключения для показа/скрытия большинства вышеупомянутых кнопок

Как упоминалось выше, это лишь значения по умолчанию. Все эти кнопки можно переставить или удалить, а также добавить новые.}

---

1. …например, как эта сноска. ↩︎

[Shauny (Shaun Robinson)]

This is cool, thanks!

Is there a way to add the ‘spoiler’ tag directly in the top toolbar? It’s something we use a lot.

Edit: I have figured it out

[Shauny (Shaun Robinson)]

How do shortcuts work?

I’d like to create a keyboard shortcut for my “spoiler” button, but aren’t most shortcuts already taken for other things?

The example says shift-4 but that is a $ sign for me…

[Heliosurge (Dan DeMontmorency)]

Yeah very nice component. I was looking for the button to display the extra buttons in the composer bar

I think a cool feature would be to add a button to composer bar. Maybe 2 options. Display/hide &/or Composer bar menus. That way you can group functions in a selectable bar

Ie

• Style bar: would have things like bold, italics, strike through etc…
• Layout bar: Table, right justify, center…
• with option to customize main bar with commonly used.

[mdoggydog]

@Shauny

How do shortcuts work?

(Keep in mind, this component merely exposes the parameters/options that are already in the Discourse JS code…)

For shortcuts, you specify the shortcut key, along with any modifiers… and then Discourse always prepends a ctrl+ (or cmd+ on apple hardware?). E.g., the literal string “shift+4” (as the button parameter) translates into ctrl+shift+4 (as the shortcut keys).

@Shauny

but aren’t most shortcuts already taken for other things?

I haven’t tried to figure out a way to remove shortcuts — again, this component is additive on top of the baseline of buttons already built-in to Composer. (I wish I could make ctrl+e not be a shortcut for preformatted text, and just be “jump to end of line” instead!)

[denvergeeks]

h01y cr@p this is awwwwwwesommmmme

[Shauny (Shaun Robinson)]

I have a problem with this, I’m using it and loving it but I have added a “spoiler” button and it creates spoiler tags using DIV instead of SPAN, so they always go on a new line when using the WYSIWYG editor.

Is there a way to change this please?

[Shauny (Shaun Robinson)]

Is this still supported?

Still getting the issue with spoilers being in a DIV not a SPAN.

[Shauny (Shaun Robinson)]

I guess this is not supported any longer?

Can anyone suggest how I can fix this, the “spoiler” button doesn’t work correctly (see my previous post)

[denvergeeks]

I will look into this, but I need you to show specifically how you added this “spoiler” button.

[Shauny (Shaun Robinson)]

Thanks!

Here’s my setup:

There are more under there. But spoiler is added with:

spoiler,shift+x

In Markdown mode it works perfectly.
In WYSIWYG mode, when you select something and click the spoiler button instead of being in a SPAN it goes in a DIV so it is a block level element on its own line.

Thanks!

[mdoggydog]

Literally an hour ago, I just realized that ComposerButtonBonanza (CBB) is broken in WYSIWYG-Composer. (Or, perhaps, it is the other way around.) We do not use WYSIWYG on the site that I maintain, so I never noticed! So… ugh.

(Not a fan of WYSIWYG. MediaWiki (e.g., wikipedia) put a lot of effort into a WYSIWYG editor a decade+ ago, thinking it would encourage more people to become editors. It ended up making no difference, and they could not get rid of the original editor anyway because there are so many things you can’t really accomplish with the WYSIWYG version, and it ends up just being generally kind of clunky compared to the original wikicode+preview editor.)

Hmm… indpendently of CBB… if I insert a spoiler in the WYSIWYG-Composer, and then click outside of the spoiler-box to edit elsewhere, it permanently blurs itself and I do not seem to be able to edit the spoiler text again …unless I switch to Markdown-mode. Am I missing something, or is that just a bug in WYSIWYG-mode?

…Oh, nevermind! If I triple-click (out of frustration and/or boredom) then I can edit the spoiler text again! (Not a fan of WYSIWYG-mode; did I mention that already?)

[Shauny (Shaun Robinson)]

If you can fix spoilers so they don’t become block-level I will be very grateful

[tobiaseigen]

I added a warning to the first post that it’s not compatible with the richtext editor.

@Shauny

In Markdown mode it works perfectly.
In WYSIWYG mode, when you select something and click the spoiler button instead of being in a SPAN it goes in a DIV so it is a block level element on its own line.

I haven’t tested this but it sounds to me like this has nothing to do with this particular component. I’d start a new support bug report with repro steps.

[renato (Renato Atilio)]

@mdoggydog

if I insert a spoiler in the WYSIWYG-Composer, and then click outside of the spoiler-box to edit elsewhere, it permanently blurs itself and I do not seem to be able to edit the spoiler text again …unless I switch to Markdown-mode. Am I missing something, or is that just a bug in WYSIWYG-mode?

I can’t reproduce it, what browser are you using?

@tobiaseigen

this has nothing to do with this particular component

This issue is specific to the component, core’s original “Blur spoiler” action uses a different implementation that’s not just adding the [spoiler] bbcode.

[tobiaseigen]

Ah, excellent and thanks for looking into it.

[mdoggydog]

@renato

I can’t reproduce it, what browser are you using?

I’m using Firefox 140.5.0esr .

[renato (Renato Atilio)]

Thanks for the report, it should be fixed now. (And sorry for the off-topic)

[Shauny (Shaun Robinson)]

@renato

This issue is specific to the component, core’s original “Blur spoiler” action uses a different implementation that’s not just adding the [spoiler] bbcode.

I’m going to see if I can write an extra component to override what it does in Rich Text mode, so it uses the core’s implementation

[祁同伟]

This topic component currently shows the following error:

控制台报错，site.mobileView/site.desktopView功能异常

chunk.3472481d53e4a6d601a5.d41d8cd9.js:sourcemap:10 DEPRECATION: Importing `inject` from `@ember/service` is deprecated. Please import `service` instead. \[deprecation id: importing-inject-from-ember-service\] This will be removed in ember-source 7.0.0. See https://deprecations.emberjs.com/id/importing-inject-from-ember-service for more details. （匿名） @ chunk.3472481d53e4a6d601a5.d41d8cd9.js:sourcemap:10 chunk.3472481d53e4a6d601a5.d41d8cd9.js:sourcemap:117 Discourse v2026.1.0-latest — https://…