Formatting toolbar


From a purely selfish standpoint it’d be nice to have this plugin’s [floatl] and [floatr] baked into Discourse BBcode plugin. That might be a stretch as it’s not a standard BBCode, but it would resolve a few issues.

(Sam Saffron) #67

I am fine to pull that into the plugin


I had an issue with the slick gallery since the last weekend but it did work before. I thought it was an incompatibility with the latest Discourse update.

It should work together, but there is maybe an issue, I’ll look into it if I can.

(T. H. Wright) #69

I’ve done some more testing. I can’t seem to get any theme component working besides Tiger Stripes. I will see if I can find what’s happening.

Update: I bumped the install to 2.0.0.beta6 and all is working. I haven’t seen anything stating that that is the minimum version. Either way, things appear to be working.

(François Douville) #70

I don’t see all the icons on mobile

(Jay Pfaffman) #71

There is a hamburger menu on the right that will display the icons.

(François Douville) #72

Perfect. It will be visible soon?

(Jay Pfaffman) #73

Click the hamburger menu. It will display immediately.

(François Douville) #74

Yes the hamburger menu is to display the icons but there are too many icons so it needs anither hamburger menu?


There are some solutions :

Either some css customization or deactivate some buttons. I don’t really have a better solution for now


After the latest update the css here might no longer work?


I bookmarked this commit : Making toolbar option menu button padding consistent · discourse/discourse@5f2f36f · GitHub

I’ll check tonight (probably) and give an update if this css trick is different now


Ok little update

If you want to hide the bulleted list:

#reply-control .d-editor-button-bar .bullet {
    display: none;

The numbered list:

#reply-control .d-editor-button-bar .list {
    display: none;

The spacer between categories of buttons:

.d-editor-spacer {
    display: none;

To hide a specific button of the formatting toolbar on desktop or mobile:

Example with the center button:

#reply-control .d-editor-button-bar .center_ui_button {
    display: none;

Another example with the color button:

#reply-control .d-editor-button-bar .color_ui_button {
    display: none;

For now, the existing buttons are:

  • underline_ui_button
  • addimg_ui_button
  • floatl_ui_button
  • left_ui_button
  • center_ui_button
  • right_ui_button
  • justify_ui_button
  • color_ui_button
  • size_ui_button

With the options to activate/deactive each button and these css tricks, it should be easy to make the toolbar you want.

I might rewrite the plugin in the future to make these things easier, but it’s not a priority right now, as long as it works well with the latest version of Discourse

Anyone is free to use, fork, recreate, rewrite this plugin to make the best version you need



I am using this plugin and i have a problem: i cannot undo a button click.

eg. i click the right align button, and i get [right]Text[/right] in my post. i would expect that ctrl+z-ing would make that text disappear. (right now the solution is to manually delete the text)

Cannot undo (ctrl+z) in create new topic view

I’m not sure it’s related to this plugin, when I use another button on the toolbar, CTRL+Z doesn’t work either.


hmmmm, yes, it looks like it. a bug it is then.


so it seems that this is intended behavior

(xiasummer) #84

Is that possible that I can edit the “Color text” default color?

Hi, I really like this toolbar. Especially the color text tool. It upgraded the “too-simple” markdown fonts.

While on the other hand, I don’t want my text to be too colorful either, so I usually use one extra color expect for default black, like only red color.

But the tool default is [color=#]Text[/color]
That makes me have to change the “#” symbol to “red” everytime.
Can I simply change the code to set the default color to “red”?

This is the right solution

After a rebuild, it takes effects.


Are you familiar with github ? The best way would be to fork the plugin and edit, you’ll have to install your version of the plugin.

But another (and easier) solution would be to deactivate the color button and add this code in Customize </head> :

<script type="text/discourse-plugin" version="0.4">
    api.onToolbarCreate(toolbar => {
        id: "color_ui_button",
        group: "extras",
        icon: "paint-brush",
        perform: e => e.applySurround('[color=red]', '[/color]', 'Color')

It will create another color button with the default you want

(Jordan) #86

Is the installation of the BBCode plugin a prerequisite to installing @Steven’s Formatting toolbar plugin discussed in this thread?