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
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 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=;
}
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.
