Formatting toolbar

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 :

formatting1


:link: Plugin link

Explore the code of the plugin in this github page

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

If you use this plugin in conjunction with the official BBCode plugin 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


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). 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:

/* UNDERLINE BUTTON */
.d-editor-button-bar .underline_ui_button {
    display: none;
}
/* IMAGE BUTTON */
.d-editor-button-bar .addimg_ui_button {
    display: none;
}
/* FLOAT LEFT BUTTON */
.d-editor-button-bar .floatl_ui_button {
    display: none;
}
/* ALIGN LEFT BUTTON */
.d-editor-button-bar .left_ui_button {
    display: none;
}
/* ALIGN CENTER BUTTON */
.d-editor-button-bar .center_ui_button {
    display: none;
}
/* ALIGN RIGHT BUTTON */
.d-editor-button-bar .right_ui_button {
    display: none;
}
/* JUSTIFY BUTTON */
.d-editor-button-bar .justify_ui_button {
    display: none;
}
/* COLOR BUTTON */
.d-editor-button-bar .color_ui_button {
    display: none;
}
/* 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:

.floatl {
     margin-right: =Margin_float_left=;
}
.floatr {
    margin-left: =Margin_float_right=;
}

:pray:t2: Thanks

  • ZogStrip : for his Discourse BBcode plugin, which served as a base for this plugin.
  • eviltrout : for the upgrade of the Discourse BBcode plugin with a new engine (2016)
  • Sam Saffron : for the upgrade of the Discourse BBcode plugin with the new markdown-it engine (2017)
  • cpradio : for the help on the toolbar.
50 Likes

Thanks to eviltrout 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 !

2 Likes

New version available

Added a bbcode color allowing you to use some color in your text.

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.

11 Likes

Installed the plugin! Looking forward to seeing how it works and the like. I enjoy the extra buttons on the toolbar; simple and straightforward.

1 Like

Is there a way to limit it to a particular category only?

Anyone tried it together with the “Blog Post Plugin”?

1 Like

I think it’s possible by adding an extra config in categories, but I would not be able to to be honest :smile:

I didn’t try, but should work

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 :

6 Likes

@Steven
Thanks for the plugin.

I forked it 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 ?

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

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 ?

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.

You’re right, you only have to edit the client.XX.yml and the formattingtlb-ui.js.es6 files

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).

5 Likes

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…

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/ icons. (without the fa- prefix)

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?

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

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…

I would do it like that yes.

How/Where did you add the [floatl] tag ?

I just typed the [floatl] tag manually right into the editor (markdown style)