Formatting toolbar

Plugin
66

From a purely selfish standpoint it’d be nice to have this plugin’s [floatl] and [floatr] baked into Discourse BBcode plugin. That might be a stretch as it’s not a standard BBCode, but it would resolve a few issues.

2 Likes
67

I am fine to pull that into the plugin

68

I had an issue with the slick gallery since the last weekend but it did work before. I thought it was an incompatibility with the latest Discourse update.

It should work together, but there is maybe an issue, I’ll look into it if I can.

69

I’ve done some more testing. I can’t seem to get any theme component working besides Tiger Stripes. I will see if I can find what’s happening.

Update: I bumped the install to 2.0.0.beta6 and all is working. I haven’t seen anything stating that that is the minimum version. Either way, things appear to be working.

70

I don’t see all the icons on mobile

image
371F845C-CA99-4C78-9A16-F6F3DE1B5BE6.jpeg750×120 18.3 KB

71

There is a hamburger menu on the right that will display the icons.

1 Like
72

Perfect. It will be visible soon?

73

Click the hamburger menu. It will display immediately.

74

Yes the hamburger menu is to display the icons but there are too many icons so it needs anither hamburger menu?

75

There are some solutions :

Either some css customization or deactivate some buttons. I don’t really have a better solution for now

5 Likes
76

After the latest update the css here might no longer work?

1 Like
77

I bookmarked this commit : https://github.com/discourse/discourse/commit/5f2f36fdd785e90202c4a49e7e0ac5746e69eb49

I’ll check tonight (probably) and give an update if this css trick is different now

78

Ok little update

If you want to hide the bulleted list:

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

The numbered list:

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

The spacer between categories of buttons:

.d-editor-spacer {
    display: none;
}

To hide a specific button of the formatting toolbar on desktop or mobile:

Example with the center button:

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

Another example with the color button:

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

For now, the existing buttons are:

  • underline_ui_button
  • addimg_ui_button
  • floatl_ui_button
  • left_ui_button
  • center_ui_button
  • right_ui_button
  • justify_ui_button
  • color_ui_button
  • size_ui_button

With the options to activate/deactive each button and these css tricks, it should be easy to make the toolbar you want.

I might rewrite the plugin in the future to make these things easier, but it’s not a priority right now, as long as it works well with the latest version of Discourse

Anyone is free to use, fork, recreate, rewrite this plugin to make the best version you need

4 Likes
79

Hello,

I am using this plugin and i have a problem: i cannot undo a button click.

eg. i click the right align button, and i get [right]Text[/right] in my post. i would expect that ctrl+z-ing would make that text disappear. (right now the solution is to manually delete the text)

81

I’m not sure it’s related to this plugin, when I use another button on the toolbar, CTRL+Z doesn’t work either.

1 Like
82

hmmmm, yes, it looks like it. a bug it is then.

83

so it seems that this is intended behavior

84

Is that possible that I can edit the “Color text” default color?

Hi, I really like this toolbar. Especially the color text tool. It upgraded the “too-simple” markdown fonts.

While on the other hand, I don’t want my text to be too colorful either, so I usually use one extra color expect for default black, like only red color.

But the tool default is [color=#]Text[/color]
That makes me have to change the “#” symbol to “red” everytime.
Can I simply change the code to set the default color to “red”?

This is the right solution

After a rebuild, it takes effects.

85

Are you familiar with github ? The best way would be to fork the plugin and edit, you’ll have to install your version of the plugin.

But another (and easier) solution would be to deactivate the color button and add this code in Customize </head> :

<script type="text/discourse-plugin" version="0.4">
    api.onToolbarCreate(toolbar => {
      toolbar.addButton({
        id: "color_ui_button",
        group: "extras",
        icon: "paint-brush",
        perform: e => e.applySurround('[color=red]', '[/color]', 'Color')
      });
    });
</script>

It will create another color button with the default you want

1 Like
86

Is the installation of the BBCode plugin a prerequisite to installing @Steven’s Formatting toolbar plugin discussed in this thread?