Is it possible to add options to toolbar for font colour and more heading sizes? #41

mattgroom · 2020-09-08T09:31:25Z

Hi

I've been trying to find if there is a way to add a couple of font colours to select from and a couple of different size headings (h1/h2/ h3). I can see how you can hide certain options in the toolbar, but is there a way to add more functionality such as the font colours etc?

Any advice greatly appreciated.

Many thanks

Aless55 · 2020-10-03T10:51:41Z

I am supporting this request. Especially the one for the different header sizes. It would also be great if one could include <hr> tags as separation lines and a button to include mailto and phone hrefs.

philwilliammee · 2020-11-25T17:23:26Z

You can override the toolbar with some thing like the code below. The only issue I am having is trix expects a specific loading order and the defer on the script in resources/views/trixassets.blade.php is causing a issue. The h2 button in the toolbar is not auto disabled. This is related to this issue basecamp/trix#565 (comment)

<head>
@trixassets
<script>
    window.addEventListener('load', function() {
        Trix.config.blockAttributes.heading2 = {
            tagName: 'h2'
            , terminal: true
            , breakOnReturn: true
            , group: false
        }
    })
    addEventListener("trix-initialize", event => {
        const {
            toolbarElement
        } = event.target
        const h1Button = toolbarElement.querySelector("[data-trix-attribute=heading1]")
        h1Button.insertAdjacentHTML("afterend", `
<button type="button" class="trix-button" data-trix-attribute="heading2" title="Heading 2" tabindex="-1" data-trix-active="">H2</button>
`)
    })
</script>
...

after removing the defer from the script import you can do the code below and it works as expected (disables the h2 button in the toolbar when h1 is selected)

@trixassets
<script>
    Trix.config.blockAttributes.heading2 = {
        tagName: 'h2'
        , terminal: true
        , breakOnReturn: true
        , group: false
    }
    addEventListener("trix-initialize", event => {
        const {
            toolbarElement
        } = event.target
        const h1Button = toolbarElement.querySelector("[data-trix-attribute=heading1]")
        h1Button.insertAdjacentHTML("afterend", `
<button type="button" class="trix-button" data-trix-attribute="heading2" title="Heading 2" tabindex="-1" data-trix-active="">H2</button>
`)
    })
</script>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Is it possible to add options to toolbar for font colour and more heading sizes? #41

Is it possible to add options to toolbar for font colour and more heading sizes? #41

mattgroom commented Sep 8, 2020

Aless55 commented Oct 3, 2020 •

edited

Loading

philwilliammee commented Nov 25, 2020 •

edited

Loading

Is it possible to add options to toolbar for font colour and more heading sizes? #41

Is it possible to add options to toolbar for font colour and more heading sizes? #41

Comments

mattgroom commented Sep 8, 2020

Aless55 commented Oct 3, 2020 • edited Loading

philwilliammee commented Nov 25, 2020 • edited Loading

Aless55 commented Oct 3, 2020 •

edited

Loading

philwilliammee commented Nov 25, 2020 •

edited

Loading