amaelftah/laravel-trix

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

mattgroom opened this issue · 2 comments

mattgroom commented

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 commented

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 commented

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>