Is it possible to add options to toolbar for font colour and more heading sizes?
mattgroom opened this issue · 2 comments
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
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.
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>