# Formatting toolbar

**URL:** https://meta.discourse.org/t/formatting-toolbar/40649
**Category:** Plugin
**Created:** [March 6, 2016, 12:39pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649 "2016-03-06T12:39:23Z")
**Posts on this page:** 20
**Page:** 4

<div class="post-metadata">

### Author: ![bombledmonk](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bombledmonk/32/80322_2.png) [@bombledmonk](https://meta.discourse.org/u/bombledmonk)
#### Post date: [April 13, 2018, 2:13am UTC](https://meta.discourse.org/t/formatting-toolbar/40649/66 "2018-04-13T02:13:09Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [April 13, 2018, 3:12am UTC](https://meta.discourse.org/t/formatting-toolbar/40649/67 "2018-04-13T03:12:26Z")

</div>

I am fine to pull that into the plugin

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [April 13, 2018, 4:19pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/68 "2018-04-13T16:19:35Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![thwright](https://avatars.discourse-cdn.com/v4/letter/t/e19b73/32.png) [@thwright](https://meta.discourse.org/u/thwright)
#### Post date: [April 16, 2018, 2:59pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/69 "2018-04-16T14:59:12Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Francois\_Douville](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/francois_douville/32/94221_2.png) [@Francois\_Douville](https://meta.discourse.org/u/Francois_Douville)
#### Post date: [April 27, 2018, 12:26pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/70 "2018-04-27T12:26:06Z")

</div>

I don’t see all the icons on mobile

 ![image](https://global.discourse-cdn.com/meta/original/3X/7/5/75d23a28a3c07f7547a7e2e3d3a5e3908fcc893d.jpeg)

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [April 27, 2018, 12:31pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/71 "2018-04-27T12:31:02Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Francois\_Douville](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/francois_douville/32/94221_2.png) [@Francois\_Douville](https://meta.discourse.org/u/Francois_Douville)
#### Post date: [April 27, 2018, 12:36pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/72 "2018-04-27T12:36:43Z")

</div>

Perfect. It will be visible soon?

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [April 27, 2018, 1:18pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/73 "2018-04-27T13:18:56Z")

</div>

Click the hamburger menu. It will display immediately.

---

<div class="post-metadata">

### Author: ![Francois\_Douville](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/francois_douville/32/94221_2.png) [@Francois\_Douville](https://meta.discourse.org/u/Francois_Douville)
#### Post date: [April 27, 2018, 1:45pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/74 "2018-04-27T13:45:23Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [April 27, 2018, 1:48pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/75 "2018-04-27T13:48:48Z")

</div>

There are some solutions :

> [@Formatting toolbar](https://meta.discourse.org/t/formatting-toolbar/40649/56):
>
> Yes and no. I use some css to hide some buttons I don’t use : list, numbered list and the spacer after emphasis and upload buttons, it adds some space button.ember-view.btn.no-text.list, button.ember-view.btn.no-text.bullet, .d-editor-spacer { display: none; } You can use the css customize section in admin to hide some button on mobile like color for example button.color\_ui\_button { display: none; } I also changed to padding (space between each button) with something smaller on mob…

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

---

<div class="post-metadata">

### Author: ![Ellibereth](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ellibereth/32/202896_2.png) [@Ellibereth](https://meta.discourse.org/u/Ellibereth)
#### Post date: [May 4, 2018, 2:43pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/76 "2018-05-04T14:43:35Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [May 4, 2018, 7:26pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/77 "2018-05-04T19:26:22Z")

</div>

I bookmarked this commit : [Making toolbar option menu button padding consistent · discourse/discourse@5f2f36f · GitHub](https://github.com/discourse/discourse/commit/5f2f36fdd785e90202c4a49e7e0ac5746e69eb49)

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

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [May 5, 2018, 1:38am UTC](https://meta.discourse.org/t/formatting-toolbar/40649/78 "2018-05-05T01:38:32Z")

</div>

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

---

<div class="post-metadata">

### Author: ![TheBestPessimist](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/thebestpessimist/32/247704_2.png) [@TheBestPessimist](https://meta.discourse.org/u/TheBestPessimist)
#### Post date: [May 24, 2018, 10:55am UTC](https://meta.discourse.org/t/formatting-toolbar/40649/79 "2018-05-24T10:55:36Z")

</div>

Hello,

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)

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [May 24, 2018, 4:10pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/81 "2018-05-24T16:10:39Z")

</div>

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

---

<div class="post-metadata">

### Author: ![TheBestPessimist](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/thebestpessimist/32/247704_2.png) [@TheBestPessimist](https://meta.discourse.org/u/TheBestPessimist)
#### Post date: [May 24, 2018, 4:17pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/82 "2018-05-24T16:17:47Z")

</div>

> [@Steven](#):
>
> 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.

---

<div class="post-metadata">

### Author: ![TheBestPessimist](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/thebestpessimist/32/247704_2.png) [@TheBestPessimist](https://meta.discourse.org/u/TheBestPessimist)
#### Post date: [May 24, 2018, 6:09pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/83 "2018-05-24T18:09:39Z")

</div>

so it seems that this is intended behavior

> [@Cannot undo (ctrl+z) in create new topic view](https://meta.discourse.org/t/cannot-undo-ctrl-z-in-create-new-topic-view/88387/2):
>

---

<div class="post-metadata">

### Author: ![xiasummer](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/xiasummer/32/82790_2.png) [@xiasummer](https://meta.discourse.org/u/xiasummer)
#### Post date: [September 23, 2018, 6:39am UTC](https://meta.discourse.org/t/formatting-toolbar/40649/84 "2018-09-23T06:39:37Z")

</div>

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”?

* * *

> [@Steven](#):
>
> 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>` :
> 
> ```plaintext
> <script type="text/discourse-plugin" version="0.4">
> api.onToolbarCreate(toolbar => {
> toolbar.addButton({
> id: "color_ui_button",
> group: "extras",
> icon: "paint-brush",
> perform: e => e.applySurround('[color=red]', '[/color]', 'Color')
> });
> });
> </script>
> 
> ```
> 
> It will create another color button with the default you want

## This is the right solution

After a rebuild, it takes effects.

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [September 23, 2018, 7:04pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/85 "2018-09-23T19:04:29Z")

</div>

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>` :

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

```

It will create another color button with the default you want

---

<div class="post-metadata">

### Author: ![jord8on](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jord8on/32/166809_2.png) [@jord8on](https://meta.discourse.org/u/jord8on)
#### Post date: [October 13, 2018, 7:54pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/86 "2018-10-13T19:54:37Z")

</div>

Is the installation of the [BBCode plugin](https://meta.discourse.org/t/discourse-bbcode/65425) a prerequisite to installing @Steven’s **Formatting toolbar** plugin discussed in this thread?

[Previous page](https://meta.discourse.org/t/formatting-toolbar/40649.md?page=3)

[Next page](https://meta.discourse.org/t/formatting-toolbar/40649.md?page=5)
