Formatting toolbar

Oh ok,
I think the tag is just [left] [/left]

The funny thing is: [floatl] [/floatl] works. :confused:

I’m trying to figure out exactly what items this plugin adds to the toolbar.

Comparing the plugin version…

to the native version…

it appears you’ve got:

  • the paintbrush, which is just for color?
  • the T button, not sure what does.
  • the image button, which is sort of redundant
  • and the indent button.

Personally, I would just like to see the color option available in core.

I also added the underline button.

The T button is the H (heading) button translated in french.

The img button is usefull with the float one, because the copy/paste of a image link won’t work with it.

If you want to hide some buttons, two solutions :

  • Add some css on admin/customize with a display: none for the buttons you want to hide.

Notice the .addimg_ui_button here, it indicates that the img button will be hidden :

#reply-control .d-editor-button-bar .addimg_ui_button {
        display: none;
    }

The other css class if you want to use them :

.underline_ui_button
.color_ui_button
.floatl_ui_button
.center_ui_button
.right_ui_button
.justify_ui_button

Another solution would be to fork the plugin and delete the parts you don’t want to use, but if you’re not used to github it’s more difficult

3 Likes

PR submitted.

Suggestion: it would be super-usefull if you add also a table button
For now I use a JS script to add a simple table in Html:

9 Likes

Isn’t there a plugin that adds table already ?

I think I saw one, maybe it was @cpradio who did it.

I don’t think I could do a cool button where we can config the number of columns and rows, it would be pretty basic if I do this

1 Like

The idea is to embed a simple table. When you have a schema under your eyes is super-simple add new columns and rows (if you need).
The greatest advantage is that you don’t need to remember (or learn) the html syntax, You can simply copy and paste existing rows and columns and then edit them.

One major flaw: In mobile view, it misses the preview button…

I’ll see if I can figure out a solution for that.

2 Likes

One of my user referred to me that under certain circumstances the color is added even if you leave blank the hex number.
He made a mistake when he tried to adding the color (probably a wrong copy/paste) and he wrote:

[color=##
]Text[/color]

and the Html results:

<font color="##<br/>">Text</font>

Saving the message Text is in green

(just to let you know, I don’t think it’s a mistake that can happen often)

EDIT: I’m not a coder but probably you need to add some sanitazer to prevent users to insert something potentially malicious or dangerous?

2 Likes

Thanks for the feedback, but honestly it’s above my abilities for now

1 Like

Version 2.2 available : no new function for now but I worked on the compatibility with the new markdown-it engine.

You can try the new engine by checking the option enable experimental markdown it in the admin settings. The former engine will still work until markdown-it become the default one.

If you have any issue with the buttons or bbcode, please contact me. I tested it for a full day without any log error, but we never know.


Thanks to @Sam for the update of Discourse BBCode plugin, allowing me to understand the new engine.

I have a little project for this plugin : a RTL version, the bbcode [right] is no use to them on the toolbar, [left] might be more relevant. I’ll try to do one specific branch for this in a few days/weeks.

5 Likes

With the latest Discourse update, the plugin might be broken, I’ll try to fix this ASAP

It worked well with the enable experimental markdown it option activated but it seems that with the new engine activated by default, it doesn’t work anymore.

If you have any issue after upgrading Discourse since july 17th (especially the preview that does not work and an error 500 while posting), It might be because of my plugin. Sorry for the trouble.

1 Like

The plugin has been upgraded, it is now working with the latest version of Discourse.

I tested it, we can post (that’s the minimum :sweat_smile:), the bbcodes works, no log errors.

Thanks for your patience :+1:t4:

10 Likes

Is this also part of the upgrade?

Not yet. I can try some things tonight.

1 Like

I think the best way would be to hide some buttons on mobile (it is already done by default for link, upload, bullet, list, heading and rule)

You should add this on the Mobile > CSS sheet in admin > Customize > Theme

button.ember-view.btn.no-text.color_ui_button, button.ember-view.btn.no-text.addimg_ui_button, button.ember-view.btn.no-text.floatl_ui_button, button.ember-view.btn.no-text.center_ui_button, button.ember-view.btn.no-text.right_ui_button, button.ember-view.btn.no-text.justify_ui_button, .d-editor-spacer {
    display: none;
}

It will hide the following buttons : color, add image, floatl, centrer, right, justify. And the spacer (the | between categories of buttons). It should be enough to leave room for the preview button.

If you want to keep one button, we can change the css a little bit. Example : if you want to keep the color button and the spacer

button.ember-view.btn.no-text.addimg_ui_button, button.ember-view.btn.no-text.floatl_ui_button, button.ember-view.btn.no-text.center_ui_button, button.ember-view.btn.no-text.right_ui_button, button.ember-view.btn.no-text.justify_ui_button {
    display: none;
}
1 Like

Oh, I thought there was no floatl-button. :slight_smile:

So that was the only problem? Thanks for fixing it. I’ll try it out once I’m back on my desktop.

On my version I always had a floatl button. Maybe EmileKR’s version deleted it (I think you used that one before).

Yes the issue was the size of the toolbar, the last button are hidden (overflow: hidden; on the css) if the toolbar is too long. I tried to move the preview button before mine, but I couldn’t do it. The easier solution is to hide some buttons on mobile.

If this solution is good for you, it’s great.

1 Like

Not that it’s important, but: