This content originally appeared on DEV Community and was authored by Konnor Rogers
It's not documented how to add additional "actions" to Trix.
Current actions can be found here:
But how do we make additional actions?
It appears an action is an object:
{
test: Boolean,
perform: void
}
So test is like "hey should we perform the action?"
and perform is what gets called if test === true. Seems reasonable.
Now to the hard part, I couldn't find any docs to add an additional Trix action.
But, in sleuthing through the console I found this:
document.querySelector("trix-editor").editorController.actions
/*
Object {
attachFiles: Object { test: test(), perform: perform() }
decreaseNestingLevel: Object { test: test(), perform: perform() }
increaseNestingLevel: Object { test: test(), perform: perform() }
link: Object { test: test() }
redo: Object { test: test(), perform: perform() }
undo: Object { test: test(), perform: perform() }
}
*/
So it appears we can add additional actions by tapping into the editorController.actions on a currently active instance of "trix-editor".
So a simple example to add an action may look like this:
document.addEventListener('trix-initialize', updateActions);
function updateActions() {
const editors = document.querySelectorAll("trix-editor")
const myAction = { test: true, perform: console.log("Hi!") }
editors.forEach((editor) => Object.assign(editor.editorController.actions, { myAction })
}
And now when we add an item to the toolbar, we should be able to do something like this to trigger our action:
<button data-trix-action="myAction"></button>
This is a small precursor to me exploring table support, but figured I'd share as it took a while to track down!
This content originally appeared on DEV Community and was authored by Konnor Rogers
Konnor Rogers | Sciencx (2022-04-07T14:37:03+00:00) Adding additional actions to Trix. Retrieved from https://www.scien.cx/2022/04/07/adding-additional-actions-to-trix/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.