Formatting toolbar

Formatting toolbar

I wanted to create one plugin for other users with some basic options : underline, color, a float (see the screen), center, align to right and justify. I also added a img button because it's easier to use one with the float button.

Here an example of the possibility provided by this plugin :

And in the composer you'll have new buttons :

Link

https://github.com/iunctis/discourse-formatting-toolbar

Tips

How to install a plugin : a guide by @techAPJ

The [floatr][/floatr] bbcode has been created but I didn't add a button, it doesn't feel necessary.

If you want to change the margin in the float, you can go to the Customize section in your admin panel, create a new css page and add this and change the value in the margin part :

.floatl {
  float:left;
  margin-right:15px;
}

.floatr {
  float:right;
  margin-left:15px;
}

Thanks

• ZogStriP : for his vbulletin BBcode, which I stole some parts.
• eviltrout : for the update on vbulletin BBcode
• cpradio : for the help on the toolbar.

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 !

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.

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

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

Anyone tried it together with the "Blog Post Plugin"?

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

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 :

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

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)