# 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:** 3

<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: [July 19, 2017, 7:00pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/45 "2017-07-19T19:00:32Z")

</div>

We have two different float bbcode in this plugin :

- **floatl** : will place a content on the left of your text ([like in this screen](https://raw.githubusercontent.com/iunctis/discourse-formatting-toolbar/master/formatting.png)). The bbcode exists and there is a button on the toolbar.

- **floatr** : will place the content on the right. The bbcode exists, the button has not been added on the toolbar.

My first message could explain that better, I’ll correct this 🤔

---

<div class="post-metadata">

### Author: ![tophee](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tophee/32/73406_2.png) [@tophee](https://meta.discourse.org/u/tophee)
#### Post date: [August 5, 2017, 1:47am UTC](https://meta.discourse.org/t/formatting-toolbar/40649/46 "2017-08-05T01:47:52Z")

</div>

> [@Steven](#):
>
> The plugin has been upgraded

The plugin is broken again. And seriously so. After the latest upgrade, I was [no longer able to create posts or send emails](https://meta.discourse.org/t/cannot-create-post-error-500/67448) and after hours of exploring various possible causes, it turns out that only uninstalling the plugin solved the problem (the plugin was deactivated all along, but that did not prevent it from breaking things).

---

<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: [August 5, 2017, 12:03pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/47 "2017-08-05T12:03:31Z")

</div>

I’ll check the plugin, I did not upgrade since tuesday, sorry for the trouble and thanks for the feedback

I’ll fix this as soon as possible

---

<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: [August 5, 2017, 4:05pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/48 "2017-08-05T16:05:42Z")

</div>

Hum tested it on a live forum. I didn’t have any issue. I’ll try on my own version of the plugin on my forum tonight, and on another to confirm this. I’ll have a close look on the logs too

What plugins do you have ?  
I’ll try with the same plugins to see if I can reproduce

This plugin must be broken if you use the Discourse bbcode (or other bbcode plugins) since I mostly use the same code for the markdown engine. I can make a specific branch if someone needs to use both.

---

<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: [August 9, 2017, 2:31pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/49 "2017-08-09T14:31:37Z")

</div>

The plugin is considered broken here but in all my tests, it works fine…

🤔

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [August 9, 2017, 3:41pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/50 "2017-08-09T15:41:24Z")

</div>

If you can’t repro the brokenness, I’ll move it back. @tophee, you will need to provide better repro steps, but it seems this plugin works fine on latest.

---

<div class="post-metadata">

### Author: ![tophee](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tophee/32/73406_2.png) [@tophee](https://meta.discourse.org/u/tophee)
#### Post date: [August 9, 2017, 6:17pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/51 "2017-08-09T18:17:32Z")

</div>

Sorry, I forgot to reply. Not sure of it’s relevant anymore, but here we go:

> [@Steven](#):
>
> What plugins do you have ?

These are the ones I have currently installed (and things are working fine):

> History 0.1 Y   
> discourse-TL1-invites 0.0.2 Y  
> discourse-assign 0.1 N   
> Canned Replies 1.1 Y   
> discourse-data-explorer 0.2 Y  
> discourse-details 0.4 N   
> discourse-voting 0.4 Y Settings  
> discourse-narrative-bot 0.0.1 Y   
> discourse-nationalflags 1.0.0 N   
> discourse-nginx-performance-report 0.1 Y   
> discourse-ratings 0.2 Y   
> discourse-solved 0.1 Y   
> Spoiler Alert! 0.3 Y   
> staff-notes 0.0.2 Y   
> discourse-translator 0.2.0 Y   
> Watch Category 0.4 Y   
> docker\_manager 0.1 Y   
> lazyYT 1.0.1 Y   
> poll 0.9 Y

Before that, I had these plus the formatting toolbar and it [did not work](https://meta.discourse.org/t/deactivated-plugin-causes-error-500-on-post/67448/18). Removing the formatting toolbar fixed it. That’s all I can say. If it can’t be reproduced, could it be the interaction of two or more plugins that caused the problems? Or the problem was solved by something else (though I wouldn’t know what) that coincided with the removal of 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: [August 9, 2017, 6:25pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/52 "2017-08-09T18:25:30Z")

</div>

I’m sure it’s an incompatibility between one of these and the formatting toolbar. On a clean install with a few plugins, I couldn’t repro the issue

I’ll check these plugins to see which one is incompatible with mine, and see if I can make the formatting toolbar better

---

<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: [November 20, 2017, 5:27pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/53 "2017-11-20T17:27:34Z")

</div>

**Version 3.0** available. Big change, and I’m sure you’ll like it : you can now select which button will appear on the toolbar. You don’t like the color button ? Deactivate it in the settings !

Also, this version allows us to add a RTL (right to left) support, you can deactivate the right alignment button and activate the left one.

 ![toolbar1](https://global.discourse-cdn.com/meta/original/3X/e/a/ea16dd489c5c57d3b4683a18ec52649aadb6c5bf.png)

![toolbar2](https://global.discourse-cdn.com/meta/original/3X/8/8/8893a7ba42412d3b1565478ba94f9e66aae93cbd.png)

You can’t (yet?) change the order of the buttons on the toolbar, it’s above my abilities 😋

Please let me know if you have any issue during the upgrade or performance wise.

---

<div class="post-metadata">

### Author: ![MakaryGo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/makarygo/32/187426_2.png) [@MakaryGo](https://meta.discourse.org/u/MakaryGo)
#### Post date: [November 20, 2017, 7:19pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/54 "2017-11-20T19:19:01Z")

</div>

Now _this_ is **absolutely awesome!** I was even proposing something of a sorts to the :discourse: Team on discussion about composer and buttons in it, so I’m _really_ happy to see it actually done by you!  
Ha! I knew that I choose the _best_ toolbar plugin 😜  
Good work!

---

<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: [November 25, 2017, 8:44pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/55 "2017-11-25T20:44:52Z")

</div>

Seems too wide for phone display.

I use a 1920\*1080 android cell phone.

And if I open all the control tools, the cell phone display seems to be not wide enough to display all the tools. Is there any solutions?

Yours

---

<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: [November 25, 2017, 9:57pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/56 "2017-11-25T21:57:54Z")

</div>

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 mobile

```
#reply-control .d-editor-button-bar .btn {
    padding: 0 4px;
}

```

With these little tweaks, it should be better. If not, you can still deactivate some buttons with the new options.

---

<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: [March 31, 2018, 11:25pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/57 "2018-03-31T23:25:23Z")

</div>

Great plugin, thanks!

To be honest, I uploaded it because I wanted a button that shows how to modify font size instead of writing `### text`

Is it possible to add it?

Also, do you think it’s possible to show something like that when someone wants to change colors?

 ![color](https://global.discourse-cdn.com/meta/original/3X/0/3/03d4b99dc21b89b914fae07ee70bb51e27b2da18.png)

---

<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 2, 2018, 2:00pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/58 "2018-04-02T14:00:26Z")

</div>

With the latest option (we can choose which buttons can appear), I can add the size button, it’s a good idea, I’ll make an update very soon. It will be hidden by default I think.

For the color window, it’s above my capability to be honest. If someone can do something like this, I know there are a lot of people interested, I’ll gladly accept any pull request 🙏

---

<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 3, 2018, 12:17am UTC](https://meta.discourse.org/t/formatting-toolbar/40649/59 "2018-04-03T00:17:49Z")

</div>

It makes enormous amount of sense now to move this to a theme component, it makes adoption tons easier and there is nothing specific about the plugin that can not be done in a theme component.

---

<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 3, 2018, 2:17pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/60 "2018-04-03T14:17:09Z")

</div>

The toolbar per se can be done as a theme, and I’m open to it, but is it the case for the bbcode implementation in the markdown engine ?

[https://github.com/iunctis/discourse-formatting-toolbar/blob/master/assets/javascripts/lib/discourse-markdown/formatting\_bbcode.js.es6](https://github.com/iunctis/discourse-formatting-toolbar/blob/master/assets/javascripts/lib/discourse-markdown/formatting_bbcode.js.es6)

---

<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 3, 2018, 10:15pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/62 "2018-04-03T22:15:42Z")

</div>

Thinking about this a bit more, I would recommend moving to a `<div>` based solution with `data-` attribute per:

[https://github.com/discourse/discourse/blob/master/app/assets/javascripts/pretty-text/white-lister.js.es6#L140](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/pretty-text/white-lister.js.es6#L140)

That has a bunch of advantages cause even without your theme something sane will display, as opposed to ugle bbcode tags.

It also opens a general question which we should do elsewhere about how to get this formatting into emails, can you open one? Kind of open to having themes be allowed to add `email.scss` or something like that but there will be a lot of magic we need to add.

---

<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 11, 2018, 6:42pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/63 "2018-04-11T18:42:29Z")

</div>

> [@sam](#):
>
> That has a bunch of advantages cause even without your theme something sane will display, as opposed to ugle bbcode tags.

Would this limit the ability to use markdown/bbcodes inside the html divs with data-\* attribute tags? I was just trying to do something like this on a discourse instance:  
`<div data-floatr> ![image|283x72](upload://xD5khjH5UtWWvUnlvO5ZRA1aCw7.png)</div>`

and it doesn’t seem to work. The following text

`<div data-shadow>[u]hello world[/u]</div>` ends up as:

[u]hello world[/u]

whereas bbcodes can be nested  
`[b][u]hello world[/u][/b]` \>\> hello world

---

<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 13, 2018, 12:32am UTC](https://meta.discourse.org/t/formatting-toolbar/40649/64 "2018-04-13T00:32:10Z")

</div>

Does this plugin interfere with [Tiles Image Gallery](https://meta.discourse.org/t/tiles-gallery-component/81950) and [Slick Image Gallery - #5 by vchrizz](https://meta.discourse.org/t/slick-gallery-component/81952/5) at all? I can’t seem to get all three showing in the composer. If so, would moving it to a theme component allow the three to function together?

---

<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, 12:34am UTC](https://meta.discourse.org/t/formatting-toolbar/40649/65 "2018-04-13T00:34:33Z")

</div>

Yeah this is a bit tricky, but I guess the correct thing to do here if we want fancy bbcode is just to add a dependency on the official [GitHub - discourse/discourse-bbcode: vBulletin BBCode plugin · GitHub](https://github.com/discourse/discourse-bbcode) plugin. Or maybe have a theme setting for “bbcode” mode which requires the plugin vs “div” mode that requires no plugin.

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

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