# Formatting toolbar

**URL:** https://meta.discourse.org/t/formatting-toolbar/40649
**Category:** Plugin
**Created:** [March 6, 2016, 12:39pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649 "2016-03-06T12:39:23Z")
**Posts on this page:** 20
**Page:** 5

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [October 13, 2018, 8:06pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/87 "2018-10-13T20:06:54Z")

</div>

I integrated almost all the code used in bbcode plugin, so it’s highly not recommended to use both, it will probably break your forum.

---

<div class="post-metadata">

### Author: ![Stephen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stephen/32/95011_2.png) [@Stephen](https://meta.discourse.org/u/Stephen)
#### Post date: [October 13, 2018, 9:30pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/88 "2018-10-13T21:30:00Z")

</div>

How would they conflict? One outputs code into the editor, the other parses it, right?

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [October 13, 2018, 9:51pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/89 "2018-10-13T21:51:08Z")

</div>

I integrated the code in my plugin, I needed the create some bbcode (float for example), it was easier to add everything, and a have “all in one” plugin.

---

<div class="post-metadata">

### Author: ![Stephen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stephen/32/95011_2.png) [@Stephen](https://meta.discourse.org/u/Stephen)
#### Post date: [October 13, 2018, 10:04pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/90 "2018-10-13T22:04:52Z")

</div>

So you’re saying that your plugin will clash with the [official bbcode plugin](https://github.com/discourse/discourse-bbcode)?

If so, shouldn’t that be noted in the OP, and potentially on the topic for the official plugin?

If a plugin clashes with an official plugin, shouldn’t it be tagged as broken?

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [October 14, 2018, 1:52pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/91 "2018-10-14T13:52:55Z")

</div>

Good point, sam added a warning in the first post

---

<div class="post-metadata">

### Author: ![jord8on](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jord8on/32/166809_2.png) [@jord8on](https://meta.discourse.org/u/jord8on)
#### Post date: [October 16, 2018, 9:26pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/92 "2018-10-16T21:26:21Z")

</div>

I just installed this **formatting toolbar** (my first plugin!) and created a video to help any other neophytes, like me, who would like to see a demonstration of how to install this or any other plugins!

[![](https://global.discourse-cdn.com/meta/original/3X/a/9/a9721e47aa7e4bdc753bf97042577528cc2e98ba.jpeg "Install Plugins in Discourse (Formatting Toolbar)") ](https://www.youtube.com/watch?v=AnGHRGGBG30)

---

<div class="post-metadata">

### Author: ![zogstrip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zogstrip/32/512781_2.png) [@zogstrip](https://meta.discourse.org/u/zogstrip)
#### Post date: [October 17, 2018, 8:53am UTC](https://meta.discourse.org/t/formatting-toolbar/40649/93 "2018-10-17T08:53:55Z")

</div>

FYI `git pull` has nothing to do with the installation of a plugin 😉

It pulls the changes (if any) from [https://github.com/discourse/discourse\_docker](https://github.com/discourse/discourse_docker) to your local copy.

The nice thing, is that it’s not even needed as it is [included](https://github.com/discourse/discourse_docker/blob/e0bbec1fb97f62c55c0036d68b16bdfefbadc5f1/launcher#L703) when you do `./launcher rebuild app` (_🙌 for less work_)

---

<div class="post-metadata">

### Author: ![xiasummer](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/xiasummer/32/82790_2.png) [@xiasummer](https://meta.discourse.org/u/xiasummer)
#### Post date: [October 17, 2018, 1:14pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/94 "2018-10-17T13:14:14Z")

</div>

is it possible to add this feature?

> [@Tiles Image Gallery](https://meta.discourse.org/t/tiles-image-gallery/81950):
>
> warning This component is deprecated. Discourse now has a built-in tiled gallery feature: Responsive Grid Galleries! Built using [David Desandro](https://github.com/desandro)’s open source [Masonry](https://masonry.desandro.com/) and [ImagesLoaded](https://imagesloaded.desandro.com/) libraries - [MIT license](https://desandro.mit-license.org/) " … released under the MIT license. Have at it." #### How do I use this? This component adds a button to the composer. So all you have to do is: 1- Upload a bunch of images using the default Discourse uploa…

 ![](https://global.discourse-cdn.com/meta/original/3X/a/f/af2ec16d2ca127099ceeee9f4fcb23dae9922bf8.jpg)

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [October 17, 2018, 3:33pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/95 "2018-10-17T15:33:20Z")

</div>

I think so, I personnaly use the gallery theme component from the same author without any issue.

---

<div class="post-metadata">

### Author: ![LoganRTW](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/loganrtw/32/174659_2.png) [@LoganRTW](https://meta.discourse.org/u/LoganRTW)
#### Post date: [October 22, 2018, 6:24am UTC](https://meta.discourse.org/t/formatting-toolbar/40649/96 "2018-10-22T06:24:38Z")

</div>

Does anyone know how to add a horizontal rule? I have some members doing it with the `<hr>` tag, but others ask, “How can they do that!?”

I love the plugin.

---

<div class="post-metadata">

### Author: ![TheBestPessimist](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/thebestpessimist/32/247704_2.png) [@TheBestPessimist](https://meta.discourse.org/u/TheBestPessimist)
#### Post date: [October 22, 2018, 8:59am UTC](https://meta.discourse.org/t/formatting-toolbar/40649/97 "2018-10-22T08:59:49Z")

</div>

like

* * *

this?

vvvvvvvvvvv

```plaintext
like

---

this?

```

^^^^^^^^^^^^^

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [October 22, 2018, 3:26pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/99 "2018-10-22T15:26:28Z")

</div>

You can create a button in the Customize section, in `</head>`

```plaintext
<script type="text/discourse-plugin" version="0.4">
    api.onToolbarCreate(toolbar => {
      I18n.translations.en.js.hrule_timestamp = "Horizontal rule";
      toolbar.addButton({
        id: "hrule_button",
        group: "extras",
        icon: "level-down",
        title: "hrule_timestamp",
        perform: e => e.addText("<hr>")
      });
    });
</script>

```

When you click on the button, it will add a `<hr>`

> [@Teddy\_Rooter](#):
>
> How can I cleaned up the plugin and change details?

The best way would be to create a github account, fork the plugin and edit it

Most of the action after that is in

📁 `assets/javascripts/discourse/initializers/` for the buttons  
📁 `config/` for the language

---

<div class="post-metadata">

### Author: ![LoganRTW](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/loganrtw/32/174659_2.png) [@LoganRTW](https://meta.discourse.org/u/LoganRTW)
#### Post date: [October 23, 2018, 8:24am UTC](https://meta.discourse.org/t/formatting-toolbar/40649/100 "2018-10-23T08:24:39Z")

</div>

Indeed, but I want something on the bar so the users who don’t know the secrets can easily do it.

---

<div class="post-metadata">

### Author: ![LoganRTW](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/loganrtw/32/174659_2.png) [@LoganRTW](https://meta.discourse.org/u/LoganRTW)
#### Post date: [October 23, 2018, 8:32am UTC](https://meta.discourse.org/t/formatting-toolbar/40649/101 "2018-10-23T08:32:00Z")

</div>

That is beautiful. I can’t thank you enough. It’s up and running on all my themes.

---

<div class="post-metadata">

### Author: ![Kankuro](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kankuro/32/123065_2.png) [@Kankuro](https://meta.discourse.org/u/Kankuro)
#### Post date: [October 29, 2018, 2:20am UTC](https://meta.discourse.org/t/formatting-toolbar/40649/102 "2018-10-29T02:20:36Z")

</div>

I think you should just repurpose this plugin and call it a “Extended WYSIWYG Editor” or something along those lines.

It seems you added visuals for a lot that the other BBCode plugin adds, but they conflict with each other, which means people can’t use both unfortunately.

---

<div class="post-metadata">

### Author: ![Stephen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stephen/32/95011_2.png) [@Stephen](https://meta.discourse.org/u/Stephen)
#### Post date: [October 29, 2018, 4:05am UTC](https://meta.discourse.org/t/formatting-toolbar/40649/103 "2018-10-29T04:05:41Z")

</div>

> [@Kankuro](#):
>
> “Extended WYSIWYG Editor”

No, absolutely not. It’s not a WYSIWYG in any sense of the term. Discourse has a Markdown editor with a preview pane.

A WYSIWYG editor previews the styles and formatting in-line - think Microsoft Word or the TinyMCE editor.

---

<div class="post-metadata">

### Author: ![Kankuro](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kankuro/32/123065_2.png) [@Kankuro](https://meta.discourse.org/u/Kankuro)
#### Post date: [October 29, 2018, 5:27am UTC](https://meta.discourse.org/t/formatting-toolbar/40649/104 "2018-10-29T05:27:48Z")

</div>

Essentially the same thing when using the preview. I’m sure he understands what I mean even if terminology are different between others.

---

<div class="post-metadata">

### Author: ![Stephen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stephen/32/95011_2.png) [@Stephen](https://meta.discourse.org/u/Stephen)
#### Post date: [October 29, 2018, 6:54am UTC](https://meta.discourse.org/t/formatting-toolbar/40649/105 "2018-10-29T06:54:38Z")

</div>

No, they aren’t, not even remotely close. This isn’t a point of debate, it’s the meaning of the term and it’s not something you can redefine at will.

---

<div class="post-metadata">

### Author: ![Kankuro](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kankuro/32/123065_2.png) [@Kankuro](https://meta.discourse.org/u/Kankuro)
#### Post date: [October 29, 2018, 8:49am UTC](https://meta.discourse.org/t/formatting-toolbar/40649/106 "2018-10-29T08:49:09Z")

</div>

Okay, well, my suggestion still stands.

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [October 29, 2018, 12:02pm UTC](https://meta.discourse.org/t/formatting-toolbar/40649/107 "2018-10-29T12:02:53Z")

</div>

I think WYSIWYG will be misleading, as Stephen said. My plugin is not that advanced

> [@Kankuro](#):
>
> It seems you added visuals for a lot that the other BBCode plugin adds, but they conflict with each other, which means people can’t use both unfortunately.

I don’t think there’s a bbcode that’s not in my plugin, I used the official as a base for mine at the time. I needed to add some bbcodes (float left and right, justify) myself for the plugin, so it’s easier to use all bbcodes in this plugin instead of asking users to install both.

[Previous page](https://meta.discourse.org/t/formatting-toolbar/40649.md?page=4)

[Next page](https://meta.discourse.org/t/formatting-toolbar/40649.md?page=6)
