# 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:** 1
### Author:  [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [March 6, 2016, 12:39pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/1 "2016-03-06T12:39:23Z")
## Presentation
Add some formatting options to your discourse posts : center a text or an image, align to the right, justify, colors, underline, etc. It’s easy to use and it will provide some options to embellish your posts.
Here is an example of the possibilities provided by this plugin:
And in the composer you’ll have new buttons :
> 
## 🔗 Plugin link
Explore the code of the plugin in this github page
`https://github.com/mondiscourse/discourse-formatting-toolbar`
[https://github.com/mondiscourse/discourse-formatting-toolbar](https://github.com/mondiscourse/discourse-formatting-toolbar)
The plugin link to add in your app.yml file : `https://github.com/mondiscourse/discourse-formatting-toolbar.git`
## ⚠ Warning
If you use this plugin in conjunction with the [**official** BBCode plugin](https://meta.discourse.org/t/discourse-bbcode/65425) your Discourse instance will be broken!
Use this plugin only if you want the composer buttons with your bbcodes.
## 🪄 Tips
Here are a few tips to help you install this plugin or use all his potential
### Install a plugin in Discourse
Add this plugin link to your app.yml file : `https://github.com/mondiscourse/discourse-formatting-toolbar.git`
For more information, read this guide by @techAPJ - [**How to install a plugin**](https://meta.discourse.org/t/install-a-plugin/19157)
### Float right bbcode
We have a floatl bbcode (and button) that allows you to add a content on the left of your text (like the [image in this example](https://raw.githubusercontent.com/mondiscourse/discourse-formatting-toolbar/master/formatting.png)). There is also a`[floatr][/floatr]` bbcode, that adds a content on the right. The bbcode has been created but I didn’t add a button, it doesn’t feel necessary.
### Hide a button in the composer
To hide a specific button, it’s best to add some css in your theme, the bbcode will still be supported but the button will no longer be visible in your composer toolbar. You can choose to hide a button in Desktop or Mobile or both using the Common\>CSS section of your theme:
```css
/* UNDERLINE BUTTON */
.d-editor-button-bar .underline_ui_button {
display: none;
}
```
```css
/* IMAGE BUTTON */
.d-editor-button-bar .addimg_ui_button {
display: none;
}
```
```css
/* FLOAT LEFT BUTTON */
.d-editor-button-bar .floatl_ui_button {
display: none;
}
```
```css
/* ALIGN LEFT BUTTON */
.d-editor-button-bar .left_ui_button {
display: none;
}
```
```css
/* ALIGN CENTER BUTTON */
.d-editor-button-bar .center_ui_button {
display: none;
}
```
```css
/* ALIGN RIGHT BUTTON */
.d-editor-button-bar .right_ui_button {
display: none;
}
```
```css
/* JUSTIFY BUTTON */
.d-editor-button-bar .justify_ui_button {
display: none;
}
```
```css
/* COLOR BUTTON */
.d-editor-button-bar .color_ui_button {
display: none;
}
```
```css
/* SIZE BUTTON */
.d-editor-button-bar .size_ui_button {
display: none;
}
```
### Float margin
You can change the margin size for the two float bbcodes, change the value of the margin, copy the code and add it in your Common\>CSS theme:
```css
.floatl {
margin-right: =Margin_float_left=;
}
```
```css
.floatr {
margin-left: =Margin_float_right=;
}
```
## 🙏🏻 Thanks
- [ZogStrip](https://github.com/discourse/vbulletin-bbcode) : for his Discourse BBcode plugin, which served as a base for this plugin.
- [eviltrout](https://github.com/eviltrout) : for the upgrade of the Discourse BBcode plugin with a new engine (2016)
- [Sam Saffron](https://github.com/SamSaffron) : for the upgrade of the Discourse BBcode plugin with the new markdown-it engine (2017)
- [cpradio](https://github.com/cpradio) : for the help on the toolbar.
---
### Author:  [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [July 13, 2016, 8:40pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/2 "2016-07-13T20:40:00Z")
Thanks to [eviltrout](https://meta.discourse.org/t/now-in-master-es6-modules-text-rendering/46815/31) who updated the vbulletin bbcode (I could have not done anything without this plugin), this Formatting toolbar is compatible to the new version of Discourse (especially with the new ES6 Text API).
I tested it and I had no issue, but if you have any problem with this plugin, I’ll try my best to fix it !
---
### Author:  [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [July 23, 2016, 12:24am UTC](https://meta.discourse.org/t/formatting-toolbar/40649/3 "2016-07-23T00:24:04Z")
**New version available**
Added a bbcode color allowing you to use some color in your text.
[](https://github.com/iunctis/discourse-formatting-toolbar/blob/master/formatting-toolbar.png?raw=true)
By using the paint brush button, you’ll have a bbcode `[color=#]Text[/color]`. Take a look at the pic to see the toolbar, the source code of the post, and the result.
---
### Author:  [@thwright](https://meta.discourse.org/u/thwright)
#### Post date: [November 7, 2016, 3:42am UTC](https://meta.discourse.org/t/formatting-toolbar/40649/8 "2016-11-07T03:42:28Z")
Installed the plugin! Looking forward to seeing how it works and the like. I enjoy the extra buttons on the toolbar; simple and straightforward.
---
### Author:  [@meglio](https://meta.discourse.org/u/meglio)
#### Post date: [November 7, 2016, 11:45am UTC](https://meta.discourse.org/t/formatting-toolbar/40649/9 "2016-11-07T11:45:13Z")
Is there a way to limit it to a particular category only?
Anyone tried it together with the [“Blog Post Plugin”](https://meta.discourse.org/t/blog-post-plugin/34739)?
---
### Author:  [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [November 7, 2016, 3:16pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/10 "2016-11-07T15:16:00Z")
> [@meglio](#):
>
> Is there a way to limit it to a particular category only?
I think it’s possible by adding an extra config in categories, but I would not be able to to be honest 😄
> [@meglio](#):
>
> Anyone tried it together with the “Blog Post Plugin”?
I didn’t try, but should work
---
### Author:  [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [November 20, 2016, 1:40am UTC](https://meta.discourse.org/t/formatting-toolbar/40649/11 "2016-11-20T01:40:28Z")
Little update on the plugin. Someone wanted a underline button and I thought it would be interesting in this plugin.
I took the liberty to reorganize the buttons too. The underline and color are in the font styling category now, next to italic and bold :
>
> 
---
### Author:  [@EmileKR](https://meta.discourse.org/u/EmileKR)
#### Post date: [February 16, 2017, 2:58pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/12 "2017-02-16T14:58:05Z")
@Steven
Thanks for the plugin.
I [forked it](https://github.com/GenZai/discourse-formatting-toolbar) to change the underline button in strikethrough, and automatically apply red color when using the brush tool.
On this function
```
onToolbarCreate(toolbar => {
toolbar.addButton({
id: "souligner_ui_button",
group: "fontStyles",
icon: "strikethrough",
perform: e => e.applySurround('[s]', '[/s]', 'souligner_ui_default_text')
});
});
```
The id comes from where ? (I would like to update it to strikethrough instead of souligner)
Do I just need to change it in the locales ?
---
### Author:  [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [February 16, 2017, 3:36pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/13 "2017-02-16T15:36:59Z")
You can keep the id and `souligner_ui_default_text` like it is, you just have to change the client.en.yml (and client.fr.yml if you want) :
```
souligner_ui_button_title: "Strikethrough"
souligner_ui_default_text: "Text"
```
The bbcode `[s][/s]` already works so you don’t have another file to edit.
But remember, in `formattingtlb-ui.js.es6` you have another code to edit (lines 78-86) for the new API.
In a few months I could delete the first part of this file, which concerns old versions of Discourse
---
### Author:  [@EmileKR](https://meta.discourse.org/u/EmileKR)
#### Post date: [February 16, 2017, 4:13pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/14 "2017-02-16T16:13:36Z")
Yes thanks, it’s what I’ve done for simplicity.
But to keep consistency I wondered if I could rename
```
souligner_ui_button_title: "Strikethrough"
```
to
`strikethrough_ui_button_title: "Strikethrough"`
as it seems to only appear in the client.en.yml and ( client.fr.yml)
But maybe there are other dependencies I’m not aware of ?
---
### Author:  [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [February 16, 2017, 4:21pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/15 "2017-02-16T16:21:15Z")
> [@EmileKR](#):
>
> But maybe there are other dependencies I’m not aware of ?
Yes, you can do that, you will have to update all locations of `souligner_ui_button_title` to `strikethrough_ui_button_title`, which should be a JavaScript file and the YML files.
---
### Author:  [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [February 16, 2017, 4:32pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/16 "2017-02-16T16:32:49Z")
You’re right, you only have to edit the `client.XX.yml` and the `formattingtlb-ui.js.es6` files
---
### Author:  [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [February 22, 2017, 11:41pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/17 "2017-02-22T23:41:47Z")
For those who use the plugin, you’ll have a little update.
There is no new function or button, I just cleaned up the plugin a little (deleting parts that ensured compatibility with the old API) and changed some details.
The point is to make the plugin easier to fork and edit, we only use now what’s needed since Discourse v1.6 (july '16).
---
### Author:  [@tophee](https://meta.discourse.org/u/tophee)
#### Post date: [March 1, 2017, 12:05am UTC](https://meta.discourse.org/t/formatting-toolbar/40649/18 "2017-03-01T00:05:01Z")
> [@EmileKR](#):
>
> I forked it
Is your version of the formatting toolbar plugin still working? I just installed it and it picked up my manually inserted [floatl] tags but the actual toolbar in the editor is still the old one…
---
### Author:  [@EmileKR](https://meta.discourse.org/u/EmileKR)
#### Post date: [March 1, 2017, 8:46am UTC](https://meta.discourse.org/t/formatting-toolbar/40649/19 "2017-03-01T08:46:24Z")
I haven’t synched my fork with the recent updates of the main branch.
I think you forgot to change the icon in assets/javascripts/discourse/initializers/formattingtlb-ui.js.es6
You need to use [http://fontawesome.io/](http://fontawesome.io/) icons. (without the fa- prefix)
---
### Author:  [@tophee](https://meta.discourse.org/u/tophee)
#### Post date: [March 1, 2017, 8:54am UTC](https://meta.discourse.org/t/formatting-toolbar/40649/20 "2017-03-01T08:54:47Z")
> [@EmileKR](#):
>
> I think you forgot to change the icon in assets/javascripts/discourse/initializers/formattingtlb-ui.js.es6
If I understand you correctly, I need to modify that file. Could you elaborate where I can find it? If it’s in the container I’ll just say that I have never been in there and hesitate to touch it. Maybe I should just use the original plugin since your is perhaps more of a personal mod?
---
### Author:  [@EmileKR](https://meta.discourse.org/u/EmileKR)
#### Post date: [March 1, 2017, 9:10am UTC](https://meta.discourse.org/t/formatting-toolbar/40649/21 "2017-03-01T09:10:39Z")
If you are using Docker.
Once you’ve modified your fork, your need to rebuild the app.
Normally you’ve added your git repo in containers/app.yml
cd /var/discourse
./launcher stop app
git pull
./launcher rebuild app
---
### Author:  [@tophee](https://meta.discourse.org/u/tophee)
#### Post date: [March 1, 2017, 9:21am UTC](https://meta.discourse.org/t/formatting-toolbar/40649/22 "2017-03-01T09:21:45Z")
Do you mean I have to create my own fork on github and pull that one instead? Currently I have your repo included in my app.yml…
---
### Author:  [@EmileKR](https://meta.discourse.org/u/EmileKR)
#### Post date: [March 1, 2017, 9:38am UTC](https://meta.discourse.org/t/formatting-toolbar/40649/23 "2017-03-01T09:38:03Z")
I would do it like that yes.
How/Where did you add the [floatl] tag ?
---
### Author:  [@tophee](https://meta.discourse.org/u/tophee)
#### Post date: [March 1, 2017, 9:45am UTC](https://meta.discourse.org/t/formatting-toolbar/40649/24 "2017-03-01T09:45:51Z")
I just typed the [floatl] tag manually right into the editor (markdown style)
[Next page](https://meta.discourse.org/t/formatting-toolbar/40649.md?page=2)